仰天一笑

昨日不悔,今日勿失,明日莫忧! —徐羽

  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  230 随笔 :: 27 文章 :: 791 评论 :: 39 Trackbacks

形如Google,Baidu的搜索关键字加亮,我比较了好几个,还是脚本之家的最好,javascript方法实现很简单,如果添加上面很炫,有需要的仁兄可以看看。

1、单个关键字加亮
代码: 
<div id="txt">
用JS让文章内容指定的关键字加亮
是这样的.. 
现在有这些关键字:美容,生活,购物 
当在文章里头出现这些关键字,就把它加亮显示.. 
文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现... 
</div>
<script language="JavaScript">
document.getElementById("txt").innerHTML = document.getElementById("txt")..innerHTML.replace(/文章/gi,"<font color=red>文章</font>");
</script>

2、多个关键字加亮
代码:
<div id="txt">
用JS让文章内容指定的关键字加亮
是这样的..现在有这些关键字:美容,生活,购物 
当在文章里头出现这些关键字,就把它加亮显示..
文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现... 
</div>
<script language="JavaScript">
document.getElementById("txt").innerHTML = document.getElementById("txt").innerHTML.replace(/(文章)|(关键字)|(功能)/gi,"<font color=red>$1$2$3</font>");
</script>

字符 含义  
$$ $ (JScript 5.5 或更新版本)  
$& 指定与整个模式匹配的 stringObj 的部分。 (JScript 5.5 或更新版本)  
$` 指定由 $& 描述的匹配之前的 stringObj 部分。 (JScript 5.5 或更新版本)  
$' 指定由 $& 描述的匹配之后的 stringObj 部分。 (JScript 5.5 或更新版本)  
$n 捕获的第 n 个子匹配,此处 n 为从1到9的十进制一位数。 (JScript 5.5 或更新版本)  
$nn 捕获的第 nn 个子匹配,此处 nn 为从01到99的十进制两位数。 (JScript 5.5 或更新版本) 
g,全局模式匹配 
i,不区分大小写匹配

注:
1〉如果你需要通过传递参数来获得关键字,你只要适当调整代码就可以了。
2〉千万注意你样式里面含有相同的关键字的匹配,如关键字是“1”的时候,你的样式里面有height=1,这是就会出现错误,这些具体的错误,你们就要自己具体调试了。

posted on 2007-01-30 10:49 仰天一笑 阅读(4245) 评论(23)  编辑 收藏 所属分类: Javascript/Ajax/XML

评论

#1楼  2007-01-30 10:59 o摆摆o0O       
收藏起来,不知道关键字和文章内容多了会不会影响加载速度,有待测试
  回复  引用  查看    

#2楼  2007-01-30 11:00 dudu      
建议使用摘要方式发布。
  回复  引用  查看    

#3楼  2007-01-30 11:08 Cat Chen      
"<font color=red>文章</font>"——这可是完全不符合web standards的写法哦,不符合XHTML,也不表达语义。
  回复  引用  查看    

#4楼  2007-01-30 11:18 o摆摆o0O       
@Cat Chen
这只是一个想法与思路,具体的代码还是要自己修改实现的,用的时候修改成自己需要的就好了啊


我调试了一下,代码直接用在HTM页里没有效果,不知道哪里错了,我对JS又不熟悉,汗~~~
  回复  引用  查看    

#5楼 [楼主] 2007-01-30 11:36 仰天一笑      
@o摆摆o0O
我写了一个小的,你可以看看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>t1</title>
<script language="javascript">
function chg()
{
var b01 = document.getElementById("strbody").innerHTML;
b01 = b01.replace(/(我)/gi,"<font color=red>$1</font>");
}
</script>
</head>

<body id="strbody">
<span>abcdefg我们你们他们</span>
<input type="button" value="on" onClick="javascript:chg()">
</body>
</html>

  回复  引用  查看    

#6楼  2007-01-30 12:18 iCaca      
也是一种不错的方法
  回复  引用  查看    

#7楼  2007-01-30 13:45 BirdsHover      
我的blog上面的全文阅读就是用这个全部加粗变红色的
  回复  引用  查看    

#8楼  2007-01-30 13:48 BirdsHover      
<script type="text/javascript" language="javascript">
<!--
window.onload = windowLoad;

function windowLoad(){
document.body.innerHTML = document.body.innerHTML.replace(/阅读全文/g,"<strong><font color='red'>阅读全文</font></strong>");
document.body.innerHTML = document.body.innerHTML.replace(/^评论$/g,"<strong><font color='red'>评论</font></strong>");
}
//-->
</script>


地址 http://birdshover.cnblogs.com/
评论两个字我的表达式捕捉不到
  回复  引用  查看    

#9楼  2007-01-30 13:54 BoyLee      
学习了
  回复  引用  查看    

#10楼  2007-01-30 15:05 JiKun.Xiong      
以这样的方式加亮内容中的所包含的关键字,对搜索引擎优化一点帮助都没有。
浏览者虽然看到的是加亮,但搜索引擎是看不到的。
注意别影响了网页下载速度。
  回复  引用  查看    

#11楼  2007-01-30 15:19 o摆摆o0O       
@JiKun.Xiong
这是为了更好的增加用户体验,而不是专门针对搜索引擎吧

  回复  引用  查看    

#12楼 [楼主] 2007-01-30 16:18 仰天一笑      
@o摆摆o0O
支持,以人为本,以客户为中心才是网站生存之道,而不是为google、baidu制作的,哈哈。

  回复  引用  查看    

#13楼  2007-01-30 17:57 dsfdsf [未注册用户]
<html></html>
  回复  引用    

#14楼  2007-01-30 19:57 老刘.      
考虑一下服务器端的处理,也是不错的选择。
  回复  引用  查看    

#15楼  2007-01-31 00:17 yunhuasheng      
好样的。
  回复  引用  查看    

#16楼  2007-01-31 09:47 a11s.net      
@老刘.
如何处理?

我还是经典的xx.aspx?id=123... 这种方式

需要对里面的部分内容添加超级连接 比如 天津 变成<a href="aa.aspx?keyword=天津">天津</a>

这个怎么在服务器搞?


  回复  引用  查看    

#17楼  2007-02-01 09:24 net [未注册用户]
不错 js还是很高效的.
  回复  引用    

#18楼  2007-02-01 11:13 大剑师      
@仰天一笑
你没有把值赋回去啊,再者Body也用不着那样使用的!
function chg()
{
var b01 = document.body.innerHTML;
b01 
= b01.replace(//gi,"<span style=\\"color:red;background-color:#ff0;\\">我</span>");
document.body.innerHTML
=b01;
}

  回复  引用  查看    

不错啊,脚本之家 www.jb51.net里面的东西确实多了
  回复  引用    

#20楼  2007-03-30 17:07 birdshome      
http://www.cnblogs.com/birdshome/archive/2006/02/23/HighlightText.html

  回复  引用  查看    

#21楼  2007-08-03 21:00 刘 [未注册用户]
用正则表达式么,还好
  回复  引用    

同意11楼的看法,一定要让人知道让搜索引擎也知道
  回复  引用    


标题  
姓名  
主页
Email (只有博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2007-01-30 11:24 编辑过
 
另存  打印