时间戳

首页 > 解决方案 > 为每个字母添加跨度，但避免使用 javascript 的 html 标记

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

问题描述

我有一个字符串

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>

其他字符串示例是：

标签： javascripthtmlregexstring

解决方案

您可以使用replace前瞻类型的正则表达式：

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

console.log(result);

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

推荐阅读