关于使用正则表达式＆amp;


highlight words in html using regex & javascript - almost there

我正在编写一个jquery插件，它将在页面搜索中进行浏览器样式的查找。我需要改进搜索，但还不想深入分析HTML。

目前，我的方法是使用一个完整的DOM元素和所有嵌套元素，并为给定的术语运行regex find/replace。在替换中，我将简单地围绕匹配的术语包装一个范围，并使用该范围作为我的锚定进行突出显示、滚动等操作。重要的是，任何HTML标记中的字符都不匹配。

这是我所得到的：

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

它可以很好地捕获所有不在HTML标记中的字符，但我很难理解如何插入搜索词。

1
2
3
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执行我想要的操作。

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

但是，在我的javascript中使用它时遇到了一些问题。使用以下代码时，chrome给出了错误"invalid regular expression:/(？)<=^>)(.？)(玛丽)(？=？<$)/：无效组"。

1
2
3
4
5
6
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);
});

。

它在小组里爆发了(？<=^>)-这是不是有些笨拙，或者是regex引擎的区别？

更新

此regex在该组上中断的原因是因为javascript不支持regex lookbehinds。参考和可能的解决方案：http://blog.stevenlevithan.com/archives/mimic-lookback-javascript。

相关讨论

是的jquerys使用内置在text()方法。它将返回所有的人物在一个选定的DOM元素。 ＜／P >

方法用DOM(文档的Node接口)：在运行过的全子节点的一元。如果孩子是一元的节点，运行递归的方法。如果它是一个文本节点(text search在node.data)如果你想highlight /变化的时候，shorten的文本节点，直到一方的位置，和插入一highligth跨度与另一个相匹配的文本和文本节点中的文本的休息。 ＜／P >

实例代码(调整的起源，是这里的)： ＜／P >

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
(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页，这可能是exactly什么是你想要的。 ＜／P >

相关讨论