Question

我正在编写一个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>

更新

当我使用http://gskinner.com/RegExr/ ...

进行测试时，以下正则表达式可以满足我的需求

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

但是我在javascript中使用它时遇到了一些麻烦。使用以下代码，chrome给出了错误“无效的正则表达式：/（？＆lt; =^ |＆gt;）（。？）（玛丽）（？=。？＆lt ;||） /：组无效“。

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

它正在破坏群组（？＆lt; = ^ |＆gt;） - 这是一个笨拙或正则表达式引擎的差异？

更新

这个正则表达式打破该组的原因是因为Javascript不支持正则表达式的外观。供参考＆amp;可能的解决方案：http://blog.stevenlevithan.com/archives/mimic-lookbehind-javascript。

Answer 1

只需使用jQuerys内置text() method。它将返回所选DOM元素中的所有字符。

对于DOM方法（docs for the Node interface）：运行元素的所有子节点。如果子元素是元素节点，则以递归方式运行。如果它是文本节点，则在文本（node.data）中搜索，如果要突出显示/更改某些内容，请将节点的文本缩短到找到的位置，然后插入带有匹配文本的highligth-span和另一个文本的其余部分的文本节点。

示例代码（已调整，原点为here）：

(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，这可能就是你想要的。

使用正则表达式突出显示html中的单词javascript - 几乎就在那里

1 个答案: