突出使用正则表达式和Javascript在html中的话 - 几乎没有突出使用正则表达式和Javas

我写一个jQuery插件，会做一个浏览器风格的发现，对网页的搜索。我需要改进的搜索，但不想进入解析HTML相当尚未。

目前，我的做法是把整个DOM元素和所有嵌套的元素，只是运行一个正则表达式查找/替换的特定期限。在代替我会简单地包裹跨度周围的匹配项，并使用该跨度为我的锚做到突出，滚动等， 这是至关重要的，任何HTML标签中没有的字符匹配。

因为我已经得到了这是接近：

(?<=^|>)([^><].*?)(?=<|$)

它捕获不是一个HTML标签的所有字符的一个很好的工作，但我无法弄清楚如何将我的搜索词。

Input: Any html element (this could be quite large, eg <body>)    
Search Term: 1 or more characters    
Replace Txt: <span class='highlight'>$1</span>

UPDATE

下面的正则表达式我想要做什么，当我与测试http://gskinner.com/RegExr/ ...

Regex: (?<=^|>)(.*?)(SEARCH_STRING)(?=.*?<|$)
Replacement: $1<span class='highlight'>$2</span>

但是我在我的javascript使用它遇到了一些麻烦。用下面的代码铬是给我的错误“无效的正则表达式：|（？）/（？<= ^>）（玛丽）（= <| $？。？）/：无效的群体”。

var origText = $('#'+opt.targetElements).data('origText');
var regx = new RegExp("(?<=^|>)(.*?)(" + $this.val() + ")(?=.*?<|$)", 'gi');
$('#'+opt.targetElements).each(function() {
   var text = origText.replace(regx, '$1<span class="' + opt.resultClass + '">$2</span>');
   $(this).html(text);
});

它打破了组（<= ^ |>？） - 这是一些笨拙的差或正则表达式引擎？

UPDATE

这正则表达式是在该组断裂的原因是因为JavaScript不支持正则表达式lookbehinds。作为参考及可能的解决方案： http://blog.stevenlevithan.com/archives/mimic-lookbehind-javascript 。

只需使用内置jQuerys text()方法。它会返回一个选择的DOM元素的所有字符。

对于DOM方法（对于文档Node接口）：运行在一个元素的所有子节点。如果孩子是元素节点，递归地运行。如果它是一个文本节点，文本（搜索node.data ），如果你想高亮/改变些什么，缩短节点，直到找到位置的文本，并插入一个highligth跨度与所匹配的文本和其他文本节点文本的其余部分。

示例代码（调整，原点是这里）：

(function iterate_node(node) {
    if (node.nodeType === 3) { // Node.TEXT_NODE
        var text = node.data,
            pos = text.search(/any regular expression/g), //indexOf also applicable
            length = 5; // or whatever you found
        if (pos > -1) {
            node.data = text.substr(0, pos); // split into a part before...
            var rest = document.createTextNode(text.substr(pos+length)); // a part after
            var highlight = document.createElement("span"); // and a part between
            highlight.className = "highlight";
            highlight.appendChild(document.createTextNode(text.substr(pos, length)));
            node.parentNode.insertBefore(rest, node.nextSibling); // insert after
            node.parentNode.insertBefore(highlight, node.nextSibling);
            iterate_node(rest); // maybe there are more matches
        }
    } else if (node.nodeType === 1) { // Node.ELEMENT_NODE
        for (var i = 0; i < node.childNodes.length; i++) {
            iterate_node(node.childNodes[i]); // run recursive on DOM
        }
    }
})(content); // any dom node

还有highlight.js ，这可能正是你想要的。