Question

我希望通过用span包围一些背景/颜色css来突出显示字符串的一部分。目前我使用的这个函数适用于普通字符串。

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>'});
}

但问题在于它并不适用于特殊字符，例如＆＃34;＆lt;＆＃34;，＆＃34;＆gt;＆＃34;和＆＃34;＆amp;＆＃34;。例如，对于& char，它在输出中返回&。

except output

"&"problem when highlighted

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树）作为应用程序的模型和视图时，然后更新模型表示抽象出视图 - HTML特殊字符，现有<span>标记等组件。

优雅的替代方法是使用双向绑定创建与视图分开的模型。（您可以使用多个JavaScript库来实现此目的，但React和Vue.js是当今流行的选择。）这里您的模型是原始字符串及其突出部分，视图是这两个用HTML呈现。这样，您的模型不会感染HTML标记，并且当模型更改时，您的视图将自动重新呈现。

请参阅此Vue.js 1示例：Vue js text highlight filter

如何匹配所有特殊字符并替换为自定义突出显示样式

1 个答案: