Как сделать, чтобы содержимое после каждой запятой внутри тега li переносило в новый li?

Question

Как сделать, чтобы содержимое после каждой запятой до ближайшей запятой внутри тега li переносило в новый li? Чтобы из <ul><li>один, два, три</li></ul> получалось <ul><li>один</li><li>два</li><li>три</li></ul>, причем запятая убиралась?

Answer 1

Способ плохой, но если это не для сайта, то воспользоваться можно:

var ul = document.querySelector("ul")
ul.innerHTML = ul.innerHTML.replace(/,/g, "<li>")

<ul><li>один, два, три</li></ul>

Answer 2

document.querySelectorAll("ul > li").forEach(function(li) {
  let words = li.textContent.split(/,\s*/);
  
  li.textContent = words[0];

  let new_html = words.slice(1).map(word => '<li>' + word + '</li>').join("");
  
  if( new_html ) li.insertAdjacentHTML("afterEnd", new_html);
});

<ul><li>один, два, три</li><li>четыре</li></ul>

/,\s*/ — \s англ. 'space', пробел. * — ноль или много штук.

Ну можно еще:

document.querySelectorAll("ul > li").forEach(function(li) {
  let words = li.textContent.split(/,\s*/);
  
  li.outerHTML = words.map(word => '<li>' + word + '</li>').join("");
});

<ul><li>один, два, три</li><li>четыре</li></ul>

Но он обновит тупо всё, даже если там не было запятых. Поэтому этот не нравится)

Answer 3

А вот и нормальный способ:

var ul = document.querySelector("ul")

var df = document.createDocumentFragment()

for (var li of ul.children) {
  for (var s of li.textContent.split(/\s*,\s*/)) {
    var x = document.createElement("li")
    x.textContent = s
    df.appendChild(x)
  }
}

ul.textContent = ""
ul.appendChild(df)

<ul><li>один, два, три</li><li>4,5</li><li>777</li></ul>

БЛОГ НА HUSL

Как сделать, чтобы содержимое после каждой запятой внутри тега li переносило в новый li?

Ответы (3 шт):