如何在保留現有HTML的同時將SPAN標簽包裝到每個單詞

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>

而且我需要在保留現有HTML的同時用SPAN包裹每個單詞。

<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> 

Answer 2

嘗試分享我為此類問題所做的工作。 我希望這有助於縮小理解范圍。

 var x = document.querySelector('#content'); var y = x.textContent.trim().split(" "); var obj = y.reduce(function(acc, cur, i) { cur = cur.replace(/\\r?\\n|\\r/g, ""); if(cur !== ""){ acc[cur] = cur; } return acc; }, {}); var regEx=new RegExp(Object.keys(obj).join("|"),"gi"); var newC = x.innerHTML.replace(regEx,function(y){ return "<span>"+y+"</span>"; }) console.log(newC); 

 <div id="content"> <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> </div>