替换跨度内的符号数组答案

【问题标题】：Replace array of signs inside a span替换跨度内的符号数组
【发布时间】：2022-01-08 20:29:30
【问题描述】：

我想将给定数组中的每个符号包装在一个 span 标签内，以便能够将其渲染到 DOM：

这是符号数组：

const signs = ['!!', '?!', '!?', '...', '..', '.', '?', '!', ':', '؟!', '!؟', '؟'];

我可以像这样单独替换每个标志：

result = result.replace(/([\:])/g, "<span class='some-class'>&nbsp;:</span>");

上面的代码把 : 符号放在一个 span 内。

如何在不硬编码的情况下对所有数组符号执行此操作？

【问题讨论】：

标签： javascript regex

【解决方案1】：

你可以使用

let result = "!! ?! !? ... .. . ? ! : ؟!, !؟ ؟";
const signs = ['!!', '?!', '!?', '...', '..', '.', '?', '!', ':', '؟!', '!؟', '؟']; 
signs.sort((a, b) => b.length - a.length);
const regex = new RegExp(signs.map(x => 
    x.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')).join('|'),
    'g');
result = result.replace(regex, "<span class='some-class'>&nbsp;$&</span>");
console.log(result)

这里，

signs.sort((a, b) => b.length - a.length) 按长度降序对signs 数组项进行排序
signs.map(x => x.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')) - 转义项目中的所有特殊字符以使它们与正则表达式中的文字字符匹配
....join('|') - 创建一个替代正则表达式
new RegExp(..., 'g') - 定义一个匹配字符串中所有模式出现的 RegExp 对象
替换模式中的$& 插入匹配值。

【讨论】：

【解决方案2】：

你可以使用：

result = signs.map(sign => "<span class='some-class'>&nbsp;" + sign + "</span>");

或者如果你想使用正则表达式，那就太复杂了：

result = signs.map(sign => sign.replace(/(.+)/g, "<span class='some-class'>&nbsp;$1</span>"));

【讨论】：

/(.+)/g 将匹配从头到尾的所有字符串，OP 仅将符号包装在 sign 数组中。