利用JS高亮显示页面的字,一般试用于搜索
2018-10-14 站长 站长日志
今天上班累了,在网上瞎逛下,看到这个代码,很不错,拿来用用:
-------------------------------------------------------------
用JS让文章内容指定的关键字加亮
是这样的..
<a href='#'>当在文章里头出现这些关键字:"文章、关键、功能",就把它加亮显示..</a>
<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('<span "color:#F00">' + rng.text + '</span>');
}
}
highlight('文章|关键|功能')
</script>
红色的字就是您要高亮的内容
PS:这个方法也坑爹,不兼容非IE核心的浏览器!
当页面有某些字要高亮显示,并且显示不同的颜色的时间用:
<script language='JavaScript'>
function highlight(key)
{
var color='';
if(key=='优秀')
color='#F00';
if(key== '良好')
color='#000';
document.write('<span "color:'+color+'">' + key + '</span>');
}
</script>
<p>节奏感:<script type="text/javascript">highlight('优秀');</script></p>
<p>音感:<script type="text/javascript">highlight('良好');</script></p>
这个倒是兼容的 但是js代码必须放在前面,并且这个只是适合一些特定的情况。不适合搜索,因为要高亮的字是用js代码包含的!
-------------------------------------------------------------
用JS让文章内容指定的关键字加亮
是这样的..
<a href='#'>当在文章里头出现这些关键字:"文章、关键、功能",就把它加亮显示..</a>
<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('<span "color:#F00">' + rng.text + '</span>');
}
}
highlight('文章|关键|功能')
</script>
红色的字就是您要高亮的内容
PS:这个方法也坑爹,不兼容非IE核心的浏览器!
当页面有某些字要高亮显示,并且显示不同的颜色的时间用:
<script language='JavaScript'>
function highlight(key)
{
var color='';
if(key=='优秀')
color='#F00';
if(key== '良好')
color='#000';
document.write('<span "color:'+color+'">' + key + '</span>');
}
</script>
<p>节奏感:<script type="text/javascript">highlight('优秀');</script></p>
<p>音感:<script type="text/javascript">highlight('良好');</script></p>
这个倒是兼容的 但是js代码必须放在前面,并且这个只是适合一些特定的情况。不适合搜索,因为要高亮的字是用js代码包含的!