為每個字母添加span，但使用javascript避免使用html標簽

Question

我有一個字符串

var string = "Selected<br>Works"

我需要用<span></span>來包裝每個字母，避免在span中包裝<br>標簽。 正則表達式有可能嗎？

我做到了：

'Selected<br>Works'.replace(/\S/g, '<span class="letter">$&</span>')

哪個回報：

<span class="letter">S</span>
<span class="letter">e</span>
<span class="letter">l</span>
<span class="letter">e</span>
<span class="letter">c</span>
<span class="letter">t</span>
<span class="letter">e</span>
<span class="letter">d</span>
<span class="letter">&lt;</span>
<span class="letter">b</span>
<span class="letter">r</span>
<span class="letter">&gt;</span>
<span class="letter">W</span>
<span class="letter">o</span>
<span class="letter">r</span>
<span class="letter">k</span>
<span class="letter">s</span>

期望的結果是：

<span class="letter">S</span>
<span class="letter">e</span>
<span class="letter">l</span>
<span class="letter">e</span>
<span class="letter">c</span>
<span class="letter">t</span>
<span class="letter">e</span>
<span class="letter">d</span>
<br>
<span class="letter">W</span>
<span class="letter">o</span>
<span class="letter">r</span>
<span class="letter">k</span>
<span class="letter">s</span>

其他字符串示例如下：

• Art Direction<br>Creative Concept<br>UX/UI Design

• Digital Branding<br>Website

Answer 1

您可以通過<br>分隔符拆分返回多個數組包含字母的字符串。 然后使用.map()和.replace()來包裝<span></span>每個字母。 最后通過<br>連接數組

 var string = "Selected<br>Works"; var newStr = string.split("<br>").map(function(val){ return val.replace(/(\\S)/g, "<span>$1</span>"); }).join("<br>"); console.log(newStr); document.body.innerHTML = (newStr); 

 span:nth-child(even) {color: blue} span:nth-child(odd) {color: red} 

Answer 2

您可以使用replace前瞻性的正則表達式：

 var string = "Selected<br>Works", result = string.replace(/(?![^<]*>)[^<]/g, c => `<span>${c}</span>\\n`); console.log(result); 

這也將跳過其他標簽，如<p>或</canvas> 。 盡管如此，它還是無法應對更復雜的HTML（包括腳本，注釋......），而正則表達式並不適用。