JS实现关键词高亮

xdwangiflytek

浏览: 675710 次
性别:
来自: 安徽

最近访客更多访客>>

fighter1945

meg_yin

xiaohei445_qq

ddxkj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Js/Jquery

JavaScript 高亮

想起以前做博客系统时，对搜索时的关键字做高亮时没搞出来，无聊之际从网上找到相关代码略加修改，方便以后查找：ok，上代码：

<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>JS 关键词高亮</title>
    <script type="text/javascript">
        /*
        * 参数说明:
        * obj: 对象, 要进行高亮显示的html标签节点.
        * hlWords: 字符串, 要进行高亮的关键词词, 使用 竖杠(|)或空格分隔多个词 .
        * bgColor: 背景颜色，默认为红色.
        */
        function MarkHighLight(obj, hlWords, bgColor) {

            hlWords = AnalyzeHighLightWords(hlWords);

            if (obj == null || hlWords.length == 0)
                return;
            if (bgColor == null || bgColor == "") {
                bgColor = "red";
            }
            MarkHighLightCore(obj, hlWords);

            //执行高亮标记的核心方法
            function MarkHighLightCore(obj, keyWords) {
                var re = new RegExp(keyWords, "i");
                var style = ' style="background-color:' + bgColor + ';" '
                for (var i = 0; i < obj.childNodes.length; i++) {

                    var childObj = obj.childNodes[i];
                    if (childObj.nodeType == 3) {
                        if (childObj.data.search(re) == -1) continue;
                        var reResult = new RegExp("(" + keyWords + ")", "gi");
                        var objResult = document.createElement("span");
                        objResult.innerHTML = childObj.data.replace(reResult, "<span" + style + ">$1</span>");
                        if (childObj.data == objResult.childNodes[0].innerHTML) continue;
                        obj.replaceChild(objResult, childObj);
                    } else if (childObj.nodeType == 1) {
                        MarkHighLightCore(childObj, keyWords);
                    }
                }
            }

            //分析关键词
            function AnalyzeHighLightWords(hlWords) {
                if (hlWords == null) return "";
                hlWords = hlWords.replace(/\s+/g, "|").replace(/\|+/g, "|");
                hlWords = hlWords.replace(/(^\|*)|(\|*$)/g, "");

                if (hlWords.length == 0) return "";
                var wordsArr = hlWords.split("|");

                if (wordsArr.length > 1) {
                    var resultArr = BubbleSort(wordsArr);
                    var result = "";
                    for (var i = 0; i < resultArr.length; i++) {
                        result = result + "|" + resultArr[i];
                    }
                    return result.replace(/(^\|*)|(\|*$)/g, "");

                } else {
                    return hlWords;
                }
            }

            //利用冒泡排序法把长的关键词放前面   
            function BubbleSort(arr) {
                var temp, exchange;
                for (var i = 0; i < arr.length; i++) {
                    exchange = false;
                    for (var j = arr.length - 2; j >= i; j--) {
                        if ((arr[j + 1].length) > (arr[j]).length) {
                            temp = arr[j + 1]; arr[j + 1] = arr[j]; arr[j] = temp;
                            exchange = true;
                        }
                    }
                    if (!exchange) break;
                }
                return arr;
            }
        }
        //end
        function search() {
            var obj = document.getElementById("waiDiv");
            var keyWord = document.getElementById("keyWord");
            MarkHighLight(obj, keyWord.value, "Orange");
        }
    </script>
</head>
<body>
    <div id="waiDiv">
        <input type="text" id="keyWord" />
        <input type="button" value="搜索" onclick="search()" /><br />
        <br />
        <div id="contentDiv">
            网上说Repository是一个独立的层，介于领域层与数据映射层（数据访问层）之间。它的存在让领域层感觉不到数据访问层的存在，它提供一个类似集合的接口提供给领域层进行领域对象的访问。Repository是仓库管理员，领域层需要什么东西只需告诉仓库管理员，由仓库管理员把东西拿给它，并不需要知道东西实际放在哪
        </div><br/><br/>
        <textarea rows="2" cols="2" style="width:100%;height:100px;">网上说Repository是一个独立的层，介于领域层与数据映射层（数据访问层）之间。它的存在让领域层感觉不到数据访问层的存在，它提供一个类似集合的接口提供给领域层进行领域对象的访问。Repository是仓库管理员，领域层需要什么东西只需告诉仓库管理员，由仓库管理员把东西拿给它，并不需要知道东西实际放在哪</textarea>
    </div>
</body>
</html>

运行结果：

对于上面的字母没有区分大小写；

查看图片附件

1
顶

0
踩

分享到：

C#中的is和as | 【转】现在浏览器的工作原理

2012-02-09 21:04
浏览 4391
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JS实现关键词高亮

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JS实现关键词高亮

评论

发表评论

相关推荐

js怎么控制textarea滚动条定位在光标的位置

js 禁止鼠标滑轮滚动的事件

网页上“分享”的实现

用iframe模拟ajax上传文件

jquery.validationEngine

AjaxFrom

学会读JQuery等JS插件源码

打开对话框时，设置焦点到 input 域失效

js锚点定位

JQuery获取Radio选中的值

使用jQuery清空file文件域的方法

input提示

JS(DOM)对象和JQuery对象的相互转换

判断某个元素是否在js数组中

SCRIPT1028: Expected identifier, string or number

JS中的replaceAll方法

IE8下的一个另类

Js/JQuery 获取下拉框值

【转】现在浏览器的工作原理

js设置页面没有鼠标右击

最近访客更多访客>>