使用正则expression式和JavaScript在html中突出显示单词 – 几乎在那里
我正在写一个jQuery插件，将做一个浏览器式的页面查找search。 我需要改进search，但不想进入parsingHTML。
目前我的方法是采取一个完整的DOM元素和所有嵌套的元素，并简单地运行正则expression式查找/replace给定的期限。 在replace中，我将简单地在匹配的术语周围包围一个跨度，并使用该跨度作为我的锚点来进行突出显示，滚动等。 重要的是，任何html标记内的字符都不匹配。
这与我所得到的一样接近：
(?<=^|>)([^><].*?)(?=<|$) 它捕获所有不在 html标签中的字符的function非常好，但是我很难找出如何插入我的search字词。
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
下面的正则expression式，当我用http://gskinner.com/RegExr/testing时，我想要什么…
Regex: (?<=^|>)(.*?)(SEARCH_STRING)(?=.*?<|$) Replacement: $1<span class='highlight'>$2</span>
但是，我有一些麻烦在我的JavaScript使用它。 使用下面的代码，chrome给了我错误“无效的正则expression式：/（？<= ^ |>）（。 ？）（Mary）（？=。 ？<| $）/：无效的组”。
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); });
它打破了组（？<= ^ |>） – 在正则expression式引擎中这是笨拙的还是不同的？
UPDATE
这个正则expression式打破了这个组的原因是因为Javascript不支持正则expression式lookbehinds。 有关参考和可能的解决scheme： http : //blog.stevenlevithan.com/archives/mimic-lookbehind-javascript 。
只需使用jQuerys内置的text()方法即可 。 它将返回所选DOM元素中的所有字符。
对于DOM方法（ 文档为Node接口 ）：运行元素的所有子节点。 如果孩子是一个元素节点，则recursion运行。 如果是文本节点，请在文本（ node.data ）中进行search，如果要突出显示/更改某些内容，请缩短节点的文本直到find的位置，然后在高位跨度中插入匹配的文本和另一个文本节点为文本的其余部分。
示例代码（调整后，原点在这里 ）：
(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 ，这可能正是你想要的。
