javascript 多个搜索词|关键词高亮

axl234

浏览: 268432 次
性别:
来自: 北京

最近访客更多访客>>

ShaLongBus

398466028

54931104

qq22903594

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

css
javascript

<!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>无标题文档</title>
</head>
<body>
<style>
.highlight{ background-color:#ff0; color:#000;}
</style>
我是无辜的关键词，躺着不中枪
<hr>
<div id="content"> 用JS让文章内容指定的关键字加亮
是这样的.. <a href="#">现在有这些关键字:美容,生活,购物</a> 当在文章里头出现这些关键字,就把它加亮显示..
文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...
不知道怎样来实现这样的功能啊?特此求助 </div>
<script type="text/javascript">
/*----------------------------------------*
* 参数说明:
* obj: 对象, 要进行高亮显示的html标签节点.
* hlWords: 字符串, 要进行高亮的关键词词, 使用竖杠(|)或空格分隔多个词 .
* cssClass: 字符串, 定义关键词突出显示风格的css伪类.
* 参考资料: javascript HTML DOM 高亮显示页面特定字词
\*----------------------------------------*/
function MarkHighLight(obj, hlWords, cssClass) {

hlWords = AnalyzeHighLightWords(hlWords);

    if (obj == null || hlWords.length == 0) return;
    if (cssClass == null) cssClass = "highlight";
    MarkHighLightCore(obj, hlWords);

    //------------执行高亮标记的核心方法----------------------------
    function MarkHighLightCore(obj, keyWords) {
        var re = new RegExp(keyWords, "i");

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 class='" + cssClass + "'>$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------------------------

var divObj = document.getElementById("content");
MarkHighLight(divObj, '文章|关键|功能');
</script>
</body>
</html>

分享到：

js根据内容高度分页 | js过滤HTML标签

2012-06-13 16:15
浏览 927
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论