为每个字母添加跨度，但避免使用 javascript 的 html 标记

Question

我有一个字符串

var string = "Selected<br>Works"

我需要用<span></span> 包装每个字母，避免将<br> 标签包装在span 内。正则表达式可以吗？

我做到了：

'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

您可以将replace 与前瞻式正则表达式一起使用：

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

console.log(result);

这也会跳过其他标签，例如 <p> 或 </canvas>。尽管如此，它仍无法处理更复杂的 HTML（包括脚本、cmets 等），而正则表达式不适合这些 HTML。

Answer 2

您可以通过<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}