利用搜索引擎引用高亮页面关键字
当在使用大多数的网页搜索引擎的“网页快照”功能时,都会在返回的快照页面中加入关键字高亮的功能。这将非常方便查找网页中被检索的内容,其中 google 快照的关键字高亮还融入了分词功能,不同的词以不同的颜色显示。可是由于其他的原因,google 的网页快照非常的不稳定,那么就需要自己加上这个关键字的高亮功能。
本节代码主要使用了 onLoad 事件、document.referrer 属性以及字符串对象 indexOf 方法和 split 方法,主要功能和用法如下。
• 当页面完全载入时,onLoad 事件会被触发,该事件可以调用相应的函数,作为其事件处理函数。在函数中,可以是任意合法的JavaScript代码。
• document.referrer 返回用户用于冲浪至当前文档的地址。如果当前文档是首页或是通过键入 URI 到达的页面,那么这个属性返回空字符串。
• indexOf 方法返回 String 对象内第一次出现子字符串的字符位置。indexOf 方法返回一个整数值,指出String对象内子字符串的开始位置。如果没有找到子字符串,则返回 -1。如果 startIndex 是负数,则 startIndex 被当作零。如果它比最大的字符位置索引还大,则它被当作最大的可能索引。从左向右执行查找。否则,该方法与 lastIndexOf 相同。
• split 方法将一个字符串分割为子字符串,然后将结果作为字符串数组返回,该方法的结果是一个字符串数组,在 stringObj 中每个出现 separator 的位置都要进行分解。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>
运行该程序后,页面出现一段文本文字,如下图所示。如果是通过搜索引擎找到进入这个页面的话,就会根据搜索引擎上的关键字来高亮显示搜索的文本,如下图所示。
利用搜索引擎引用高亮页面关键字
分享到:
相关推荐
wps VBA excel高亮显示关键字 excel在搜索关键字时会把关键字高亮突出显示出来 遇到关键字就自动变色高亮的 , 是可以自己定义要变色的关键字
高亮显示 关键字 function HeightLight(Keyword) { //文本选择器 var TextRange; //是否找到 var Found=false; //找到的次数 var Count = 0; TextRange = document.body.createTextRange(); Found = ...
searchEngine 是基于 ElasticSearch 和 Java 实现的搜索引擎系统,实现关键字高亮搜索、添加文本等功能。 该项目集成了 Spring Boot、ElasticSearch、RestHighLevelClient、Vue.js、Element-ui、Log4j 和 Fastjson ...
高亮显示关键字。 因为在网上搜到的类似插件,觉得不是太完美,或者说是不太符合自己想要的要求,于是自己写的一个高亮显示关键字插件,感觉还可以
最近开发的时候做了textarea 高亮关键字,尝试过很多方法,比如用iframe,和编辑器替换,当然这也是一个方法,但是原来是用textbox的内容要达到兼容这两种方法是做不到的,所以这里是使用jquery插件和jquery核心文件搞的...
C# winform 文本编辑器中高亮显示关键字 ,FastColoredTextBox
Editplus编辑Sql高亮显示关键字,操作步骤见word文档
react-reactmarker高亮显示关键字并为您的文字添加颜色
基于 ElasticSearch 和 Java 实现的搜索引擎系统,实现关键字高亮搜索、添加文本等功能。该项目集成了
通过关键字搜索相关新闻,搜索出来的列表,默认是没有关键字高亮显示的,为了更好的客户体验度,现增加关键字高亮显示功能,调整后,仅需在创建适配器时多增加一个输入框对象即可
vs2017 for shader高亮显示关键字,我用的unity版本是2018.
主要为大家详细介绍了Vue实现搜索结果高亮显示关键字,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
关键字高亮具体案例 有js文件 html文件 很实用
纯客户端页面关键字搜索高亮jQuery插件jquery.textSearch-1.0.js
纯客户端页面关键字搜索高亮jQuery插件,这里就是一个方法,没有打包,很好用!只需要调用$("tbody").textSearch("查阅"); 这种方式就OK,文档内容付有使用方式,下载后请谨记原著!
文件描述:Xshell软件(配色方案&高亮关键字/突出显示集)的相关文件 适用人群:所有IT计算机行业人群,重点突出用户为“网络工程师、运维工程师、弱点工程师、云计算工程师、网络安全工程师等技术人员” 软件适用...
在Ultraedit中高亮显示VHDL语言的关键字。下载后拷贝到wordfile文件后即可。
超强RichEdit控件,自动换行,高亮关键字,可直接用于工程开发
实时、快速实现自定义关键字的高亮显示,可同时实现多个组关键字高亮显示。