js中将ttile中关键字标上颜色，两种方法

最新推荐文章于 2023-02-28 19:34:55 发布

转载最新推荐文章于 2023-02-28 19:34:55 发布 · 457 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/iioschina/blog/760566

文章标签：

#xhtml #python #javascript #ViewUI

本文介绍了一种使用JavaScript和jQuery实现的关键字高亮显示方法，并通过正则表达式匹配来改变网页上特定关键字的颜色。提供了两种不同的实现方式：一种采用双重循环进行关键字替换；另一种利用`replace`函数的内部功能结合随机颜色生成函数实现更为灵活的关键字变色。

2019独角兽企业重金招聘Python工程师标准>>>

将选中的内容中的文字根据指定的关键字变色，写了两个方法都可以，也用到正则全字符匹配，问题是匹配后怎么替换比较难，发现了replace的内部function方法，还有随机变色的函数。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <title>关键字变色的例子</title>
    <script type="text/javascript" src="jquery.js"></script>
    <style type="text/css">

</style>
</head>

<body>
    <table>
        <tr>
            <td>
                <div class=test>
                    <ul style='margin-top:0'>
                        <li>aghk14tsr</li>
                        <li>b1结果一二三四五</li>
                        <li>cgddfaf12</li>
                        <li>ddsfs435</li>
                        <li>daf14s</li>
                        <li>dsfsa4567</li>
                        <li>d12134</li>
                        <li>dsfa</li>
                        <li>gafsa</li>
                        <li>hasf</li>
                        <li>j2134</li>
                        <li>kaf</li>
                        <li>kasfas</li>
                        <li>k234</li>
                        <li>ksafda</li>
                        <li>ksafd435435</li>
                        <li>kafdsaf</li>
                        <li>1234324</li>
                        <li>2sadfasf</li>
                        <li>323432</li>
                        <li>4324235</li>
                        <li>4werwq</li>
                        <li>4safsa</li>
                        <li>4afsa</li>
                        <li>4324234</li>
                        <li>4adasfsaf</li>
                    </ul>
                    <ul class="extend">
                    </ul>
                </div>
            </td>
        </tr>
    </table>
    <script type="text/javascript">
    var html1;

var keyWord = ['a', 'g', 'h', 'k', 'm', '1', '4', '五'];
$(function() {

        // showRedKeyword1(keyWord);用到了两次循环
        showRedKeyword2(keyWord); //使用replace的内部函数找到对应的匹配字符
        addSomeLi();

});

function getRandomColor() {

return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
}

    function addSomeLi() {
        html1 = "";
        for (var i = 0; i < 20; i++) {
            html1 += '<li>' + '<font color=' + getRandomColor() + '>' + i + '</font>' + '</li>';

        }
        $(".extend").append(html1);
    }

    function showRedKeyword1(keyWord) {
        length = keyWord.length;
        var i;
        var temp;
        var reg;
        for (i = 0; i < length; i++) {

            temp = keyWord[i];
            html1 = "";
            $(".test li").each(function() {

html1 = $(this).html();

                reg = RegExp(temp, "gm");
                html1 = html1.replace(reg, "<font color\=red>" + temp + "<\/font>");
                $(this).html(html1);

});
}

}

    function showRedKeyword2(keyWord) {
        var temp;
        var reg;
        temp = keyWord.join("|");
        html1 = "";
        $(".test li").each(function() {

html1 = $(this).html();

            reg = RegExp("$" + temp + "$", "gm");
            html1 = html1.replace(reg, function(match) {
                return "<font color\=" + getRandomColor() + ">" + match + "<\/font>";
            });

$(this).html(html1);

});

}
</script>
</body>

</html>

转载于:https://my.oschina.net/iioschina/blog/760566