Question

我希望做一些与此插件类似的内容http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

但我遇到的问题是上面的插件不允许你在html中突出显示单词。

因此，如果您正在寻找my text

内部html，如

this is <a href="#">my</a> text that needs highlighting

你不会得到任何突出显示。

有没有办法突出显示文字而忽略其间的任何html标签？

Answer 1

我摆弄了一些允许HTML标签位于空白字符位置的RegEx：

<div id="test">this is <a href="#">my</a> text that needs highlighting</div>

JavaScript的：

var src_str = $("#test").html();
var term = "my text";
term = term.replace(/(\s+)/,"(<[^>]+>)*$1(<[^>]+>)*");
var pattern = new RegExp("("+term+")", "i");

src_str = src_str.replace(pattern, "<mark>$1</mark>");
src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/,"$1</mark>$2<mark>$4");

$("#test").html(src_str);

在此处试试：http://jsfiddle.net/UPs3V/

Answer 2

我想发表评论但是堆栈不允许我或者我似乎无法找到它的按钮所以必须在答案中这样做。脚本存在问题。例如：在以下字符串中突出显示狐狸：

<img src="brown fox.jpg" title="The brown fox" /><p>some text containing fox.</p>

会破坏img标签：

var term = "fox";
term = term.replace(/(\s+)/,"(<[^>]+>)*$1(<[^>]+>)*");
var pattern = new RegExp("("+term+")", "i");
src_str ='<img src="brown fox.jpg" title="The brown fox" />'
    +'<p>some text containing fox.</p>'
src_str = src_str.replace(pattern, "<mark>$1</mark>");
src_str = src_str.replace(/(<mark>[^<>]*)((<[^>]+>)+)([^<>]*<\/mark>)/,"$1</mark>$2<mark>$4");
src_str

我正在制作一个突出显示脚本，并解决了没有意识到脚本可能必须突出显示多个标签的问题。以下是我如何通过尝试突出标记内容来破坏标记，此脚本也突出显示内容中的多个实例，但不突出显示多个标记：

str='<img src="brown fox.jpg" title="The brown fox" />'
    +'<p>some text containing fox. And onother fox.</p>'
var word="fox";
word="(\\b"+ 
    word.replace(/([{}()[\]\\.?*+^$|=!:~-])/g, "\\$1")
        + "\\b)";
var r = new RegExp(word,"igm")
str.replace(/(>[^<]+)/igm,function(a){
    return a.replace(r,"<span class='hl'>$1</span>");
})

不确定如何组合这些脚本并对多个标签进行突出显示有效，但会密切关注此主题。

Answer 3

我尝试了接受的解决方案，它似乎打破了复杂的页面，例如这个（无限递归）。另外，我并没有真正看到依赖jQuery的好处，所以我重写了代码以独立于jQuery（它也大大缩短了，并且不支持花哨的选项）。

如果您愿意，可以轻松添加选项并使用类。

function highlight(re, node, depth, maxdepth){
    node = node || document.body;
    depth = depth || 0;
    maxdepth = maxdepth || 10;

    if( node.nodeType === 3 ){
        var match = node.data.match(re);
        if(match){
            var span = document.createElement('span');
            span.style.backgroundColor = '#ffa';
            var wordNode = node.splitText(match.index);
            wordNode.splitText(match[0].length);
            var wordClone = wordNode.cloneNode(true);
            span.appendChild(wordClone);
            wordNode.parentNode.replaceChild(span, wordNode);
            return 1;
        }
    } else if( depth === maxdepth ){
        console.log( 'Reached max recursion depth!', node );
    } else if( (node.nodeType === 1 && node.childNodes) && !/(script|style)/i.test(node.tagName) ) {
        for( var i = 0; i < node.childNodes.length; i++ ){
            i += highlight(re, node.childNodes[i], depth + 1, maxdepth);
        }
    }
    return 0;
}

使用jQuery突出显示html中的文本

3 个答案: