用JS将搜索的关键字高亮显示实现代码

JavaScript016

用JS将搜索的关键字高亮显示实现代码,第1张

用JS让文章内容指定的关键字加亮

是这样的..

现在有这些关键字:美容,生活,购物

当在文章里头出现这些关键字,就把它加亮显示..

文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...

不知道怎样来实现这样的功能啊?特此求助

复制代码

代码如下:

<script

language="JavaScript">

function

highlight(key)

{

var

key

=

key.split('|')

for

(var

i=0

i<key.length

i++)

{

var

rng

=

document.body.createTextRange()

while

(rng.findText(key[i]))

//rng.pasteHTML(rng.text.fontcolor('red'))

rng.pasteHTML('<div

style="border:1

solid

reddisplay:inline"><a

href="#"

title="+

rng.text

+">'

+

rng.text

+

'</a></div>')

}

}

highlight('文章|关键|功能')

</script>

<html>

<input type="hidden" name="keyword" value="<?php echo $result->highlight_keywords ?>">

<div class="sec_main">

     <?phh echo $result->content?>

</div><!-- section main end -->

<js>

<script src="/static/js/jquery.mark.min.js"></script>

<script>

   $(function() {

       var keyword = $("input[name='keyword']").val()

       var options = {

           "className": "match"

       }

       $(".sec_main").mark(keyword,options)

   })

</script>

高亮文字的样式设置

<css>

.match{

     color:red

}

var oldKey=""

function showKey(allStr,keyStr){

if(oldKey!=""){

allStr.replace("<font color='#ff0000'>"+oldKey+"</font>",oldKey)

}

if(keyStr!=""){

allStr.replace(keyStr,"<font color='#ff0000'>"+keyStr+"</font>")

}

oldKey = keyStr

}