Javascript: разбить строку по l oop в цикле - PullRequest
Новая
       5

Javascript: разбить строку по l oop в цикле

3 голосов
/ 25 марта 2020

У меня есть строка с идентификаторами и именами, разделенными ^ (между идентификаторами и именами) и; (между наборами), например 

var string = "1^John Smith;2^Sophia Williams;3^Emily Johnson;";

Мне нужно получить что-то вроде этого 

$('#1').html('<option value="1">John Smith</option><option value="2">Sophia Williams</option><option value="3">Emily Johnson</option>');

Я пробовал циклы, но застрял: 

var string = "1^John Smith;2^Sophia Williams;3^Emily Johnson;";

var a = string.split(";"),
    i;
for (i = 0; i < a.length; i++){
  if (a[i] !== ""){
    var b = a[i].split("^"),
    i2;
    for (var i2 = 0; i2 < b.length; i++) {
      var name = b[i2];
      console.log(name);
    }
  }
}

Я не уверен что это хороший способ

Ответы [ 2 ]

3 голосов
/ 25 марта 2020

Использование Option()

new Option(text, value, defaultSelected, selected)

var string = "1^John Smith;2^Sophia Williams;3^Emily Johnson;"

var options = string.split(';').map(i => {
  return new Option(...i.split('^').reverse())
})

$('#1').html(options)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<select id="1"></select>
1 голос
/ 25 марта 2020

Вы можете создать строку HTML внутри вашего l oop, выбрав первый элемент из b в качестве значения для вашего параметра и второй элемент из b в качестве текста в вашем теге параметра. Затем вы можете добавить строку HTML версии тега option, используя эти компоненты текста и значения, к накопленной строке на каждой итерации вашего for-l oop: 

var string = "1^John Smith;2^Sophia Williams;3^Emily Johnson;";

var a = string.split(";");
var html_str = "";
for (var i = 0; i < a.length-1; i++) { // loop to a.length-1 so you don't need an if-statement to check blanks
  var b = a[i].split("^");
  var val = b[0];
  var txt = b[1];
  html_str += '<option value="' + val +'">' + txt +'</option>';
}

$('#one').html(html_str);
console.log(html_str);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="one"></select>

Альтернативным подходом может быть использование регулярного выражения, чтобы получить компоненты из вашей строки и преобразовать ее в желаемую строку HTML, используя .replace() с функцией замены: 

var string = "1^John Smith;2^Sophia Williams;3^Emily Johnson;";
var html_str = string.replace(/(\d+)\^([^;]+);/g, (_, val, txt) => `<option value="${val}">${txt}</option>`);

$('#one').html(html_str);
console.log(html_str);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="one">
</select>

Вышеуказанное регулярное выражение:

  • (\d+)\^: группирует любые цифры (группа 1), которые имеют карат ^ следующие за ними
  • ([^;]+);: группирует любые символы, не являющиеся точкой с запятой ; (группа 2), за которыми следует точка с запятой.

Эти группы формируются для каждого вхождения в вашей строке, а затем используются в обратном вызове метода .replace(), где группа 1 равна val, а группа 2 равна txt.

...