正则表达式，表示不以序列开头和结尾的字符串

Question

 filter('highlight', function() {
 return function(data, search) {
     if (data) {
        data = data.toString();
        if (search) {
             for(var i = 0; i < search.length; i++) {
                data = data.replace( new RegExp( "(" + preg_quote( search[i] ) + ")" , 'gi' ), "<span class='search-highlight'>$1</span>" );
             }
        }
     }
     return data;
 };}).

如果它包含搜索的任何元素，我需要突出显示数据。如果数据是＆＃34; foo@bar.com"并且搜索包含＆＃34; foo＆＃34;，该函数将返回<span ..>foo</span>@bar.com。

问题是搜索数组是否包含＆＃34; foo＆＃34;，＆＃34; a＆＃34; ，该函数返回<sp<span ..>a</span>n ..>foo</span>@bar.com，它打破了页面的视图。

想法是我必须跳过已经被<span></span>标记包围的任何内容。我怎么能这样做？

Answer 1

这是一个典型的例子，说明为什么不混合使用HTML和Regex。

你有一个DOM，使用它！

首先，使用正则表达式查找匹配的位置。这可以通过调用regex.exec(string)然后获取regex.lastIndex来完成。这告诉您正则表达式搜索到的位置。使用textNode.splitText()调用lastIndex，然后再减去匹配的长度。这将匹配的文本与其余文本分开。然后，您可以将其包装在元素中。

对所有文本节点和所有搜索重复。

我会留下准确的代码作为练习，但这将更加可靠。