利用搜索引擎引用高亮页面关键字

最新推荐文章于 2024-07-12 09:01:15 发布

davinci_2012

最新推荐文章于 2024-07-12 09:01:15 发布

阅读量328

点赞数

文章标签：搜索引擎 javascript google function string html

本文链接：https://blog.csdn.net/davinci_2012/article/details/6516330

版权

　　当在使用大多数的网页搜索引擎的“网页快照”功能时，都会在返回的快照页面中加入关键字高亮的功能。这将非常方便查找网页中被检索的内容，其中 google 快照的关键字高亮还融入了分词功能，不同的词以不同的颜色显示。可是由于其他的原因，google 的网页快照非常的不稳定，那么就需要自己加上这个关键字的高亮功能。

　　本节代码主要使用了 onLoad 事件、document.referrer 属性以及字符串对象 indexOf 方法和 split 方法，主要功能和用法如下。

　　• 当页面完全载入时，onLoad 事件会被触发，该事件可以调用相应的函数，作为其事件处理函数。在函数中，可以是任意合法的JavaScript代码。

　　• document.referrer 返回用户用于冲浪至当前文档的地址。如果当前文档是首页或是通过键入 URI 到达的页面，那么这个属性返回空字符串。

　　• indexOf 方法返回 String 对象内第一次出现子字符串的字符位置。indexOf 方法返回一个整数值，指出String对象内子字符串的开始位置。如果没有找到子字符串，则返回 -1。如果 startIndex 是负数，则 startIndex 被当作零。如果它比最大的字符位置索引还大，则它被当作最大的可能索引。从左向右执行查找。否则，该方法与 lastIndexOf 相同。

　　• split 方法将一个字符串分割为子字符串，然后将结果作为字符串数组返回，该方法的结果是一个字符串数组，在 stringObj 中每个出现 separator 的位置都要进行分解。separator 不作为任何数组元素的部分返回。

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>利用搜索引擎引用高亮页面关键字</title>
<script language="javascript">
function FriendlyDisplayForSearch()
{
var url = document.referrer; //根据来路地址创建一个新的UrlBuilder对象
var host = url.toLowerCase(); //得到主机名
//if(host.indexOf('.google.') != -1) //如果是google搜索引擎过来的
if(true)
{
var keywords = 'JavaScript'; //得到搜索关键字
if(keywords) //如果存在关键字
{
var ht = new HighlightText(); //创建高亮文本对象
ht.Execute(keywords); //执行高亮文本
}
}
else if(host.indexOf('.baidu.') != -1)
{
}
}
function HighlightText(range) //函数:高亮文本
{
if(range) //如果存在range
{
this.m_Range = range; //范围赋值
}
else //否则
{
this.m_Range = document.body.createTextRange();
}
this.m_Keyword = '';
this.toString = function()
{
return '[class HighlightText]';
};
}
HighlightText.prototype.Execute = function(keyword) //高亮执行的原型函数
{
if(keyword) //如果存在关键字
{
this.m_Keyword = keyword; //关键字赋值
}
if(this.m_Range && this.m_Keyword) //如果存在域和关键字
{
var separater = '';
if(this.m_Keyword.indexOf(' ') == -1) //如果关键字存在空格符
{
separater = '+'; //分隔符赋值
}
var keywords = this.m_Keyword.split(separater); //根据分隔符分离关键字
var bookmark = this.m_Range.getBookmark();
for(var i=0; i<keywords.length; ++i) //循环遍历关键字
{
var keyword = keywords[i];
if(keyword && keyword.length > 1)
{
while(this.m_Range.findText(keywords[i])) //文本中存在关键字
{
//高亮关键字
this.m_Range.execCommand('ForeColor', 'false', '#FFFFFF'); //参数中的 ForeColor 用来设置或获取当前选区的前景(文本)颜色
this.m_Range.execCommand('BackColor', 'false', '#FF0000'); //BackColor 用来设置或获取当前选区的背景颜色
this.m_Range.collapse(false);
}
this.m_Range.moveToBookmark(bookmark); //赋值文本
}
}
}
}
</script>
</head>
<body onLoad="FriendlyDisplayForSearch()">
<center>
<h1>利用搜索引擎引用高亮页面关键字</h1>
<hr>
<br>
<p>JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化，减少下载时间。
JavaScript能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由 CGI 验证。JavaScript
的特点是无穷无尽的，只要你有创意。</P>
</center>
</body>
</html>

　　运行该程序后，页面出现一段文本文字，如下图所示。如果是通过搜索引擎找到进入这个页面的话，就会根据搜索引擎上的关键字来高亮显示搜索的文本，如下图所示。

利用搜索引擎引用高亮页面关键字

转载地址：http://www.xuekaifa.com/article/20101024/000246.html

davinci_2012

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用搜索引擎引用高亮页面关键字

　　当在使用大多数的网页搜索引擎的“网页快照”功能时，都会在返回的快照页面中加入关键字高亮的功能。这将非常方便查找网页中被检索的内容，其中 google 快照的关键字高亮还融入了分词功能，不同的词以不同的颜色显示。可是由于其他的原因，google 的网页快照非常的不稳定，那么就需要自己加上这个关键字的高亮功能。　　本节代码主要使用了 onLoad 事件、document.referrer 属
复制链接

扫一扫