Как перемешать строки текста в textarea на JQuery

286
14 марта 2017, 14:36

Здравствуйте. Помогите перемешать строки в textarea средствами только JQuery

Есть форма, в ней только адреса сайтов которые всегда начинаются на http или https

<textarea id="siteList">
https://vk.com
https://mail.google.com
http://ru.stackoverflow.com
http://enjoycss.com
<textarea>

Как при нажатие на кнопку Перемешатьперемешать все адреса сайтов которые в textarea

Вот мое начало

<script type="text/javascript">
$('html').on('click','#gositelist',function (){
var sitelist = $('#siteList').val();
var arrSitelist = sitelist.split('http');
arrSitelist.sort(function() { return 0.5 - Math.random() });
alert(arrSitelist);
}); 
</script>

Преобразовал строку sitelist в массив, но перемешать мне его нормально так и не удается.

Answer 1

Решение на jQuery:

$.fn.shuffleValueRows = function() { 
  var rows = this.val().trim().split('\n'); 
  var shuffled = shuffle(rows).join('\n'); 
  this.val(shuffled); 
  return this; 
   
  function shuffle(o) { 
    for(var j, x, i = o.length; i;  
      j = Math.random() * i |0,  
      x = o[--i],  
      o[i] = o[j],  
      o[j] = x); 
    return o; 
  }; 
} 
 
 
$(document).on('click', '.shuffleBtn', function() { 
  $($(this).data('selector')).shuffleValueRows(); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea id="siteList" rows=5 style="width: 100%"> 
https://vk.com 
https://mail.google.com 
http://ru.stackoverflow.com 
http://enjoycss.com 
</textarea> 
 
<hr /> 
<button class="shuffleBtn" data-selector="#siteList">Shuffle!</button>

Answer 2

Ну как-то так:

document.querySelector('#shuffle').addEventListener('click', _ => { 
  let textarea = document.querySelector('#siteList'); 
   
  textarea.value = textarea.value.split(`\n`).filter(_ => _).reduce((a, e) => (a.splice(Math.random() * (a.length + 1), 0, e), a), []).join(`\n`); 
  /*var chanks = textarea.value.split("\n"), 
      shuffled = []; 
   
  for(var i = 0; i < chanks.length; i++){ 
    var chank = chanks[i]; 
     
    if(/^\s*$/.test(chank)){ 
      continue; 
    } 
     
    shuffled.splice(Math.random() * (shuffled.length + 1), 0, chank); 
  } 
   
  textarea.value = shuffled.join("\n");*/ 
});
textarea{ 
  width: 250px; 
  height: 100px; 
}
<textarea id="siteList"> 
https://vk.com 
https://mail.google.com 
http://ru.stackoverflow.com 
http://enjoycss.com 
</textarea><br /> 
<input type='button' id='shuffle' value='Перемешать!' />

READ ALSO
ajax - 2 формы на странице

ajax - 2 формы на странице

на странице есть 2 формы, которые делают одно и то жев инпутах задан одинаковый класс

193
Как поместить картинки в блок

Как поместить картинки в блок

Здравствуйте, ребятаМне нужно поместить картинки товаров в блок 280x200, так, чтобы блок полностью заполнился и картинки не поменяли свои пропорции,...

235
Много полей или 1 поле в формате text

Много полей или 1 поле в формате text

Всем приветЧасто сталкивался с проблемой записи данных в БД

208
Не запускается Mysql в Debian

Не запускается Mysql в Debian

Я новичок в программировании, хочу разобраться, почему у меня не запускается MySQL на Debian

317