当在使用大多数的网页搜索引擎的“网页快照”功能时,都会在返回的快照页面中加入关键字高亮的功能。这将非常方便查找网页中被检索的内容,其中 google 快照的关键字高亮还融入了分词功能,不同的词以不同的颜色显示。可是由于其他的原因,google 的网页快照非常的不稳定,那么就需要自己加上这个关键字的高亮功能。
代码主要使用了,onLoad 事件、document.referrer 属性以及字符串对象 indexOf 方法和 split 方法,主要功能和用法如下。
• 当页面完全载入时,onLoad 事件会被触发,该事件可以调用相应的函数,作为其事件处理函数。在函数中,可以是任意合法的JavaScript代码。
• document.referrer 返回用户用于冲浪至当前文档的地址。如果当前文档是首页或是通过键入 URI 到达的页面,那么这个属性返回空字符串。
• indexOf 方法返回 String 对象内第一次出现子字符串的字符位置。indexOf 方法返回一个整数值,指出String对象内子字符串的开始位置。如果没有找到子字符串,则返回 -1。如果 startIndex 是负数,则 startIndex 被当作零。如果它比最大的字符位置索引还大,则它被当作最大的可能索引。从左向右执行查找。否则,该方法与 lastIndexOf 相同。
• split 方法将一个字符串分割为子字符串,然后将结果作为字符串数组返回,该方法的结果是一个字符串数组,在 stingObj 中每个出现 sparator 的位置都要进行分解。separator 不作为任何数组元素的部分返回。
<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
分享到:
相关推荐
模仿百度首页开发的纯静态页面(未使用 jQuery 插件),支持切换搜索引擎,具有搜索关键字提示
javascript正则匹配页面关键字,内附详细代码
本资料介绍了两种能让文本中的关键字实现高亮显示的javascript的代码
javascript网页关键字高亮代码.docx
<p> 一个和尚挑水吃、两个和尚抬水吃、三个和尚没水吃。总寺的方丈大人得知情况后,就派来了一名主持和一名书记,共同负责解决这一问题。主持上任后,发现问题的关键是管理不到位,于是就招聘一些和尚成立了寺庙...
jQuery实现网页关键字过滤效果,将需要过滤的文字定义在JavaScript中,可定义多个,不过要修改JS代码为数组,这样可过滤出多个不同的关键字,本例只是为你演示一个基本的功能,更多过滤功能请自己挖掘吧。...
javascript设置字体高亮 字体高亮一般用在网站搜索的时候,通常我们会把搜索出来的文字设置成高亮,像百度搜索出来的一样,搜索关键字会变成红色高亮。下面通过javascript把字符串中的指定文字设置高亮。
高亮功能主要是指对页面中指定区域的指定文字进行高亮显示,也就是背景着色。一般在搜索结果页面会经常用到这个功能。 下面就为大家提供一种解决方案,用javascript实现。 首先在<head>中引入下面javascript...
jquery.mark是一款功能强大的jQuery关键字文本高亮插件。它支持变音符号,同义词,自定义元素,自定义class名称,单词边界和iframe。它可以通过搜索的方式来高亮所有的指定关键字。
JavaScript关键字保留字属性及说明 适合初学者 对JavaScript有一定的基础知识
不能使用JavaScript中的关键字和保留字命名。 2.3.1 标识符 3、关键字 关键字:是指在JavaScript语言中被事先预定好并赋予特殊含义的单词。 保留字:是指预留的,未来可能会成为保留关键字的单词。 2.3.1 标识符 3...
很简单的一款搜索引擎,可用于站内搜索。纯搬运,如要转发请注明原作者。
无数据库 纯javaScript实现关键字(中英文)搜索
jquery实现的关键字高亮插件,简单易用,连textarea中的关键字都可以高亮哦
jQuery Highlighter 是一个用来高亮显示文本关键字的 jQuery 插件。 支持同时高亮多个关键字 多个关键字之间可以重叠 能够取消高亮关键字
JavaScript拼音搜索引擎,也就是文字匹配,与搜索框的输入提示差不多,不过要更精细,内含使用方法,研究JS的朋友可一定要看看,从中你或许会学习到不少知识。
用CSS实现java C#等程序关键字加亮的效果。 <script type="text/javascript" src="prettify.js"> <title>Web.java ()"> package org.lc.util; import java.io.IOException; public ...