javascript样式特殊字符之间的所有单词

Question

我希望在包含特殊字符的字符串中设置一些单词的样式。例如如果我有

"I want to style words in single quotes 'blue' and brackets [red]. There are multiple 'blue' and [red] words in a string"

我希望它看起来像没有特殊字符的样子

"I want to style words in single quotes <span class='blue'>blue</span> and brackets <span class='red'>red</span>..."

如何在下面的方法中替换单引号的结尾？

这就是我目前所拥有的。

highlightMessage(message) {
    var text = message.replace(/[\[']+/g, "<span class='red'>")
    var text = message.replace(/]\]']+/g, "</span")
    var text = message.replace(/'/g, "<span class='blue'>")
    //how can I replace the end of the single quote with </span>
    //the method above replaces it with <span class='blue'>

    return message;
}

我的另一个想法是用 .split() 遍历字符串并检查单词是否以单引号结尾，然后将其替换，但我不喜欢该解决方案。

Answer 1

您可以执行单个 replace 操作来实现您需要的:

var s = "I want to style words in single quotes 'blue' and brackets [red]. There are multiple 'blue' and [red] words in a string";
var res = s.replace(/'([^']+)'|\[([^\][]+)]/g, "<span class='$1$2'>$1$2</span>")
console.log(res);

模式 - '([^']+)'|\[([^\][]+)] - 匹配 '...' 和 [...] 子字符串并捕获它们的内容，并使用这些内容替换为 span 标签属性和节点值。

图案细节

• '([^']+)' - 一个单引号，然后第 1 组(稍后用 $1 引用)捕获除 以外的 1+ 个字符'，然后是一个'
• | - 或者
• \[([^\][]+)] - [ 字符，然后是第 2 组(稍后用 $2 引用) ) 捕获除 [ 和 ] 之外的 1+ 个字符，然后是 ]。

由于 $n 反向引用总是用空字符串初始化，因此在替换中使用 $1$2 没有问题:每次替换时只有其中一个包含文本，另一个是空的。