采用的:
function HighlightText(obj,keyword)
{
if(document.referrer){
var reg=new RegExp(keyword,"g"); //创建正则RegExp对象
var regdx=keyword;
var data=document.getElementById(obj).innerHTML;//替换范围获取源代码
document.getElementById(obj).innerHTML=data.replace(reg,'<span class="cC30">'+regdx+'</span>');//根据正则表达式替换
var reg=new RegExp(keyword.toLowerCase(),"g"); //创建正则RegExp对象
var regdx=keyword.toLowerCase();
var data=document.getElementById(obj).innerHTML;//替换范围获取源代码
document.getElementById(obj).innerHTML=data.replace(reg,'<span class="cC30">'+regdx+'</span>');//根据正则表达式替换
var reg=new RegExp(keyword.toUpperCase(),"g"); //创建正则RegExp对象
var regdx=keyword.toUpperCase();
var data=document.getElementById(obj).innerHTML;//替换范围获取源代码
document.getElementById(obj).innerHTML=data.replace(reg,'<span class="cC30">'+regdx+'</span>');//根据正则表达式替换
}
}
window.onload=function(){HighlightText('news','123');};
网络资源:
<script type="text/javascript"
>
<!--
// 说明:获取搜索引擎关键字
并高亮
显示
// 整理:http://www.CodeBit.cn
/* http://www.kryogenix.org/code/browser/searchhi/ */
/* Modified 20021006 to fix query string parsing and add case insensitivity */
function
highlightWord(
node,word)
{
// Iterate into this nodes childNodes
if
(
node.hasChildNodes
)
{
var
hi_cn;
for
(
hi_cn=0
;hi_cn<node.childNodes
.length
;hi_cn++)
{
highlightWord(
node.childNodes
[
hi_cn]
,word)
;
}
}
// And do this node itself
if
(
node.nodeType
== 3
)
{
// text node
tempNodeVal = node.nodeValue
.toLowerCase
(
)
;
tempWordVal = word.toLowerCase
(
)
;
if
(
tempNodeVal.indexOf
(
tempWordVal)
!= -1
)
{
pn = node.parentNode
;
if
(
pn.className
!= "searchword"
)
{
// word has not already been highlighted!
nv = node.nodeValue
;
ni = tempNodeVal.indexOf
(
tempWordVal)
;
// Create a load of replacement nodes
before = document.createTextNode
(
nv.substr
(
0
,ni)
)
;
docWordVal = nv.substr
(
ni,word.length
)
;
after = document.createTextNode
(
nv.substr
(
ni+word.length
)
)
;
hiwordtext = document.createTextNode
(
docWordVal)
;
hiword = document.createElement
(
"span"
)
;
hiword.className
= "searchword"
;
hiword.appendChild
(
hiwordtext)
;
pn.insertBefore
(
before,node)
;
pn.insertBefore
(
hiword,node)
;
pn.insertBefore
(
after,node)
;
pn.removeChild
(
node)
;
}
}
}
}
function
googleSearchHighlight(
)
{
if
(
!document.createElement
)
return
;
ref = document.referrer
;
if
(
ref.indexOf
(
'?'
)
== -1
)
return
;
qs = ref.substr
(
ref.indexOf
(
'?'
)
+1
)
;
qsa = qs.split
(
'&'
)
;
for
(
i=0
;i<qsa.length
;i++)
{
qsip = qsa[
i]
.split
(
'='
)
;
if
(
qsip.length
== 1
)
continue
;
if
(
qsip[
0
]
== 'q'
|| qsip[
0
]
== 'p'
)
{
// q= for Google, p= for Yahoo
words = unescape(
decodeURIComponent(
qsip[
1
]
.replace
(
//+/g
,' '
)
)
)
.split
(
//s+/
)
;
for
(
w=0
;w<words.length
;w++)
{
highlightWord(
document.getElementsByTagName
(
"body"
)
[
0
]
,words[
w]
)
;
}
}
}
}
window.onload
= googleSearchHighlight;
//-->
</script>
function SearchHighlight(mytag)
{
if
(
!
document.createElement)
{
return
;
}
var q
=
"
{{$q}}
"
;
//
要高亮显示的关键字
var l
=
document.getElementsByTagName(mytag);
if
(
""
==
q)
return
;
words
=
unescape(q.replace(
/+/
g,
'
'
)).split(
/
s
+/
);
for
(w
=
0
;w
<
words.length;w
++
)
{
for
(i
=
0
;i
<
l.length;i
++
)
{
var pa
=
new
RegExp(
"
(
"
+
words[w]
+
"
)
"
,
"
ig
"
);
if
(l.parentNode.parentNode.parentNode.id
!=
"
header
"
)
//
标题中的内容不替换
l.innerHTML
=
l.innerHTML.replace(pa,
"
<span class=
"
searchword
"
>$1</span>
"
);
}
}
}
1、正则表达式
2、向后引用
调用方法:
document.onload
=
SearchHighlight(”a”);//要搜索的标签名称,这里的意思是凡是形如<a></a>的标记中的内容,包含关
键字的时候均高亮显示。然后把下面的CSS定义加到你的CSS文件里或者直接加到HTML文件中
.searchword{background-color:yellow;}
那么所有的关键字(不论大小写)将显示为黄色背景。
有待分析!