一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

js 正则实现查询关键字高亮显示

时间:2013-05-29 编辑:简简单单 来源:一聚教程网

//idVal 高亮显示的标签id

//keyword 关键字

 代码如下 复制代码

//color 高亮显示的颜色
function highLight(idVal,keyword, color) {
    //正则替换
    //g (全文查找出现的所有 pattern)
    //i (忽略大小写)
    var hlValue = new RegExp("(" + keyword + ")(?=[^<>]*<)","gi");
    $ID(idVal).innerHTML = $ID(idVal).innerHTML.replace(hlValue, "$1");
}

/*
getElement object
*/

function $ID(idVal) {
    return document.getElementById(idVal);
}

给文章内的指定关键词加高亮显示

IE下有:

 代码如下 复制代码


var range = document.createRange();

FireFox下有:

 代码如下 复制代码

var range = document.body.createTextRange();

例子


用JS让文章内容指定的关键字加亮
是这样的..
现在有这些关键字:美容,生活,购物
当在文章里头出现这些关键字,就把它加亮显示..
文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...
不知道怎样来实现这样的功能啊?特此求助

 代码如下 复制代码

再看实例


用JS让文章内容指定的关键字加亮
 
 
是这样的..
 
现在有这些关键字:美容,生活,购物
 
当在文章里头出现这些关键字,就把它加亮显示..
 
 
文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...
 
不知道怎样来实现这样的功能啊?特此求助
 

 代码如下 复制代码


一个很完美的实例

 代码如下 复制代码



   
       
        Untitled Document
       
   
   
       

page


       

page 系统


       

page 系统


       

page


       

page


       

page 系统


       

page 系统


       

page


       

page


       

page 系统


       

page 系统


       

page

       
       

page


       

page 系统


       

page 系统


       

page


       

page


       

page 系统


       

page 系统


       

page


       

page


       

page 系统


       

page window 系统


       

page

   
       

page


       

page 系统


       

page 系统


       

page


       

page


       

page 系统


       

page 系统


       

page


       

page


       

page 系统


       

page window系统


       

page

                           
   


还有一个不错的jquery实现方法,地址大家可参考:http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html