javascript - 如何将 SPAN 标签包装到每个单词，同时保留现有 HTML

Question

假设我有这个 HTML:

<h2>The standard <strong>Lorem Ipsum</strong> passage, used since the 1500s</h2>

<ul>
  <li>Praesent <strong>vehicula</strong> est id nibh <i>elementum</i> placerat.</li>
</ul>

我需要用 SPAN 包裹每个单词，同时保留现有的 HTML。

<h2><span>The</span> <span>standard</span> <strong><span>Lorem</span> <span>Ipsum</span></strong> <span>passage,</span> <span>used</span> <span>since</span> <span>the</span> <span>1500s</span></h2>

<ul>
  <li><span>Praesent</span> <strong><span>vehicula</span></strong> <span>est</span> <span>id</span> <span>nibh</span> <i><span>elementum</span></i> <span>placerat.</span></li>
</ul>

这个 JS 只适用于文本，但不适用于带有标记的文本。

var fillInText = $('.my-html-editor').html().split(/ +/),
    lenA = fillInText.length,
    resultA = [];

for (var i = 0; i < lenA; i++) {
  resultA[i] = '<span>' + fillInText[i] + '</span>';
}

var joinedText = resultA.join(' ');

console.log(joinedText);

Answer 1

替换前面没有 < 的所有单词或</似乎有效:

var text = document.getElementById("t1").value;
var repl = text.replace(/[\w,\.]+/g, (m, offset, str) => {
  if (str[offset - 1] == "<"
   || str[offset - 2] == "<") return m;
   else return "<span>"+m+"</span>";
});
document.getElementById("t2").value = repl;

<textarea id="t1"><h2>The standard <strong>Lorem Ipsum</strong> passage, used since the 1500s</h2>

<ul>
  <li>Praesent <strong>vehicula</strong> est id nibh <i>elementum</i> placerat.</li>
</ul></textarea>
<textarea id="t2"></textarea>