如何匹配所有特殊字符，并用自定义的高光样式替换

Question

我想用带有一些背景/颜色CSS的span环绕着字符串的一部分。目前，我使用此功能，适合普通字符串。

function str_highlight_text(string, str_to_highlight) {
  var reg1 = new RegExp(str_to_highlight.replace(/[`~!@#$%^&*<>()_|+-=?;:'",.<>{}[]\/]/g, '\$&'), "gi"); 
  return string.replace(reg1, function(str) {return '<span style="background-color:#E4F0D4;color:#000;">'+str+'</span>'});
}

但问题在于，它不适用于"＆lt;"，">" and"＆amp;"。例如，对于& char，它在输出中返回&。

除了输出

"＆amp;"突出显示

Answer 1

这似乎有效，尽管有一个捕获。

function hilight(haystack, needle) {
    return haystack.replace(
        needle,
        '<span class="hilight">' + needle + '</span>');
}
$(document).ready(function() {
    $("#target").html(function(idx, content) {
        return hilight(content, 'fancy &amp; neat');
    });
});

.hilight {
  font-weight: bold;
  color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="target">This is a fancy &amp; neat string.</div>

当您使用DOM(即HTML树(作为您的应用程序的模型和 view 时，然后更新 model 意味着将 view - 组件抽象诸如HTML特殊字符，现有<span>标签等。

。

优雅的替代方法是创建与您的 view 使用双向绑定的模型。(您可以使用几个JavaScript库来实现这一目标，但是React和vue.js今天是流行的选择。(在这里，您的模型是原始字符串，并且要突出显示其部分，并且视图是HTML呈现的两个。这样，您的模型就不会感染HTML标签，并且当模型更改时，您的视图将自动重新渲染。

请参阅此vue.js 1示例：VUE JS文本突出显示过滤器