正则表达式的转义字符突出

Question

我建立在JavaScript中自动完成，需要强调的话做一个搜索时：

这工作正常，但有一个与转义字符的问题。 当试图突出与转义字符的文本（例如regex &>< example），下面是发生的事情：

这是怎么回事，因为我做了以下内容：

element.innerHTML.replace(/a/g, highlight) 

function highlight(str) { 
    return '<span class="foo"' + '>' + str + '</span>'; 
} 

和innerHTML包括字&，所以它是有道理的。

最后，我需要一种方法来解决，所以我想一个函数：

• 接收a和regex <br> example并返回regex &lt;br&gt; ex<span class="foo">a</span>mple
• 接收r和regex <br> example并返回<span class="foo">r</span>egex &lt;b<span class="foo">r</span>&gt; example
• 接收<和regex <br> example并返回regex <span class="foo">&lt;</span>br&gt; example

个

的条目可能会或可能不会包含HTML块，看问题here（搜索<br>或&）

Answer 1

str.replace只返回与预期的更换一个新的字符串。原始字符串不变。

var str = 'replace me'; 
 
var str2 = str.replace(/e/g, 'E'); 
 

 
// For display only 
 
document.write('<pre>' + JSON.stringify({ 
 
    str: str, 
 
    str2: str2 
 
}, null, 2) + '</pre>');

因此代码需要从替换回到所需元件设置返回值。

此外，innerHTML将返回转义的文本，而不是未转义的文本。这可能会在函数中自行转义，但为什么要使用textContent呢？但是，如果要将突出显示的文本设置为元素，那么通过使用innerHTML它会自动为我们转义文本。 :)

UPDATE：值传递给函数，然后设置为元素：

注：

• 的正则表达式也许可以做一点更稳健避免必须处理使用的特殊情况lastIndex
• 需要对输入进行某种保护，因为某人c应该提供一个令人讨厌的正则表达式模式。在这个例子中有一个最小保护检查。

higlightElemById('a', 'regex &>< example', 'a'); 
 
higlightElemById('b', 'regex &>< example', '&'); 
 
higlightElemById('c', 'regex <br> example', '<'); 
 
higlightElemById('d', 'regex <br> example', 'e'); 
 
higlightElemById('e', 'regex <br> example', '[aex]'); 
 

 
function higlightElemById(id, str, match) { 
 
    var itemElem = document.getElementById(id); 
 
    // minimal regexp escape to prevent shenanigans 
 
    var safeMatch = match.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); 
 
    // construct regexp to match highlight text 
 
    var regexp = new RegExp('(.*?)(' + safeMatch + ')', 'g'); 
 
    var text = ''; 
 
    var lastIndex; 
 
    var matches; 
 
    
 
    while (matches = regexp.exec(str)) { 
 
    // Escape the non-matching prefix 
 
    text += escapeHTML(matches[1]); 
 
    // Highlight the match 
 
    text += highlight(matches[2]); 
 
    // Cache the lastIndex in case no regexp at end 
 
    lastIndex = regexp.lastIndex; 
 
    } 
 

 
    if (text) { 
 
    text += escapeHTML(str.substr(lastIndex)); 
 
    } else { 
 
    text += escapeHTML(str); 
 
    } 
 

 
    itemElem.innerHTML = text; 
 
} 
 

 
function highlight(str) { 
 
    return '<span class="myHighlightClass">' + str + '</span>'; 
 
} 
 

 
function escapeHTML(html) { 
 
    this.el = this.el || document.createElement('textarea'); 
 

 
    this.el.textContent = html; 
 
    return this.el.innerHTML; 
 
}

.myHighlightClass { 
 
    text-decoration: underline; 
 
    color: red; 
 
}

<div id="a"></div> 
 
<div id="b"></div> 
 
<div id="c"></div> 
 
<div id="d"></div> 
 
<div id="e"></div>