highlight - javascript 如何高亮匹配到到的关键字-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

highlight - javascript 如何高亮匹配到到的关键字

伊谢尔伦 2017-04-10 14:48:09

[JavaScript讨论组]

833

<!DOCTYPE html>
<html>
<head>
<title>title</title>
</head>
<body>
  <p id="title">this is a test.this is a test</p>
<script>
    var str = document.getElementById("test").innerHTML;
    var patt1 = /is/gim;
    patt1.exec(str);
</script>
</body>
</html>

诸如以上代码，如何能匹配title文本中的is关键字，并使之在网页中反色显示。
PS：我想可以找到关键字，然后给关键字的文本对象加入一个CSS 样式，比如
<span class="guanjianzi">is</span>，但我又不知如何动手。

伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(3)

黄舟2017-04-10 14:50:09 3楼

var html = $('#title').html();
html = html.replace(/is/g, '<span class="guanjianzi">is</span>');
$('#title').html(html);

赞 +0

添加回复

黄舟2017-04-10 14:50:09 2楼

var el = document.getElementById('title');
el.innerHTML = el.innerHTML.replace(/is/g, '<span class="guanjianzi">is</span>');

找到一个很棒的 jQuery 插件，可以这样进行高亮：$('#title').highlight('is');
Source

赞 +0

添加回复

黄舟2017-04-10 14:50:09 1楼

從那個插件中找到如下關鍵代碼

jQuery.extend({
    highlight: function (node, re, nodeName, className) {
        if (node.nodeType === 3) {
            var match = node.data.match(re);
            if (match) {
                var highlight = document.createElement(nodeName || 'span');
                highlight.className = className || 'highlight';
                var wordNode = node.splitText(match.index);
                wordNode.splitText(match[0].length);
                var wordClone = wordNode.cloneNode(true);
                highlight.appendChild(wordClone);
                wordNode.parentNode.replaceChild(highlight, wordNode);
                return 1; //skip added node in parent
            }
        } else if ((node.nodeType === 1 && node.childNodes) && // only element nodes that have children
                !/(script|style)/i.test(node.tagName) && // ignore script and style nodes
                !(node.tagName === nodeName.toUpperCase() && node.className === className)) { // skip if already highlighted
            for (var i = 0; i < node.childNodes.length; i++) {
                i += jQuery.highlight(node.childNodes[i], re, nodeName, className);
            }
        }
        return 0;
    }
});

只要這樣調用：jQuery.highlight($("#title"), re, "span", "highlight");

就可以支持正則了。

或者：

jQuery.fn.highlightReg = function(re) {
    return this.each(function () {
        jQuery.highlight(this, re, "span", "highlight");
    });
}

$('#title').highlightReg(/\b(is)\b/i);

https://github.com/bartaz/sandbox.js/blob/master/jquery.highlight.js

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>