javascript 自动标记来自搜索结果页的关键字

/*定义样式*/
.hilite1{background:#69c;}

Hilite = {
exact: true,
max_nodes: 1000,
style_name: 'hilite',
style_name_suffix: true
};
Hilite.hiliteElement = function (elm, query) {
if (!query || elm.childNodes.length == 0)
return;
query = query.split(/[\s,\+\.]+/);
var qre = new Array();
for (var i = 0; i 0) {
count++;
if (count >= Hilite.max_nodes) {
var handler = function () {
Hilite.walkElements(node, depth, textproc);
};
setTimeout(handler, 50);
return;
}
if (node.nodeType == 1) {
if (!skipre.test(node.tagName) && node.childNodes.length > 0) {
node = node.childNodes[0];
depth++;
continue;
}
} else if (node.nodeType == 3) {
node = textproc(node);
}
if (node.nextSibling) {
node = node.nextSibling;
} else {
while (depth > 0) {
node = node.parentNode;
depth--;
if (node.nextSibling) {
node = node.nextSibling;
break;
}
}
}
}
};
Hilite.autoForSeachEngine = function () {
var re = new RegExp('[\\?&](q|keyword|qk|wd|p)=([^&]+)','ig');
var ref = document.referrer || 'http://search.yahoo.com/search?p=javascript&toggle=1&cop=mss&ei=UTF-8&fr=yfp-t-701';
addLoadEvent(function () {
var match = re.exec(ref);
if (match) {
var query = decodeURIComponent(match[2]);
Hilite.hiliteElement(document.getElementById('divMain'), query);
}
});
};
function addLoadEvent(f) {
var old = window.onload;
if (typeof old != 'function') window.onload = f;
else { window.onload = function () { old(); f(); }; }
}

Hilite.autoForSeachEngine();

我是test，我要被highlight。我们是javascript，我们是javascript

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • jQuery实现搜索页面关键字的功能

    jQuery实现搜索页面关键字的功能

    在一篇文章中查找关键字,找到后高亮显示. 具体代码: <html> <head> <title>Search</title> <style type="text/css"> p { border:1px solid black;width:500px;padding:5px;} .highlight { background-color:yellow; } </style> </head> <bo

  • Angularjs实现搜索关键字高亮显示效果

    需求分析: 根据关键字搜索网页内容,并且高亮显示内容中的关键字 细节分析: 1.每次执行搜索操作,需清空上一次结果 2.需区分html标签和正常文本内容,否则为关键字添加样式以后会出现标签内容被显示的情况 代码思路: 利用正则表达式匹配关键字 使用javascript字符串替换的方式,将关键字替换成<span class='red'>关键字</span> 为了避免出现当关键字为 'p' 时候,将标签<p>替换成<<span>p</span>

  • js实现搜索框关键字智能匹配代码

    js实现搜索框关键字智能匹配代码

    只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在实际应用中可以才能够数据库读取数据. 效果图: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" co

  • JS实现关键字搜索时的相关下拉字段效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>Hello World</title> <link href="style.css" rel="external nofollow" rel=

  • 基于jQuery实现搜索关键字自动匹配功能

    基于jQuery实现搜索关键字自动匹配功能

    今天我们就一起来看一个简单的基于jquery的关键字自动匹配的例子,希望文章能够对各位有帮助. 例子一 在项目中,有时候需要用户选择城市,但是城市太多,用户选择起来不太方便,所以提供了一个用户可以通过输入框输入城市的汉字或者拼音简写.结果示意图如下: 当输入拼音后结果示意图如下: 实现代码如下: <html><head><title>实时查询城市通过姓名或拼音简写</title></head><meta charset = "ut

  • JQuery+JS实现仿百度搜索结果中关键字变色效果

    1.源码 复制代码 代码如下: <script type="text/javascript"> $(function() { $("#btn_1").click(function() { var $keyword = $("#Text1").val() setHeightKeyWord('bbb', $keyword, 'Red', true) }); }); function setHeightKeyWord(id, keyword

  • jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现

    jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现

    关键字"拖曳搜索"之"拖曳"功能需要 jQuery UI 之 droppable 库 效果如下: 搜索包含相关关键字时,把拖曳左边关键字到右边框里面 也可以在输入框里输入自定义关键字到下面框 即可搜索 如果去掉不需要的关键词 搜索时 把不需要的关键词从右边框拖曳回到左边 即可 无论原来还是自定义加入的关键词 如果已存在 她会提示... 实现: 复制代码 代码如下: <script type="text/javascript" src=&qu

  • 用JS将搜索的关键字高亮显示实现代码

    用JS让文章内容指定的关键字加亮 是这样的.. 现在有这些关键字:美容,生活,购物当在文章里头出现这些关键字,就把它加亮显示.. 文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...不知道怎样来实现这样的功能啊?特此求助 复制代码 代码如下: <script language="JavaScript">function highlight(key) { var key = key.split('|'); for (var i=0; i<key.

  • Jquery插件仿百度搜索关键字自动匹配功能

    Jquery插件仿百度搜索关键字自动匹配功能

    本文实例为大家分享了Jquery搜索关键字自动匹配功能的实现代码,供大家参考,具体内容如下 jQuery AutoComplete 是一个基于jQuery实现搜索关键字自动匹配提示的插件,该插件可扩展性强,表现性能优越,方便整合到自己的项目中使用:兼容IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+, and Chrome 1.0+ 等主流浏览器. 下面是具体的使用方法: 1.使用设置 首页,要把插件的js代码嵌入到你自己的项目中去. 复制代码 代码如下: <scr

  • javascript 自动标记来自搜索结果页的关键字

    /*定义样式*/ .hilite1{background:#69c;} Hilite = { exact: true, max_nodes: 1000, style_name: 'hilite', style_name_suffix: true }; Hilite.hiliteElement = function (elm, query) { if (!query || elm.childNodes.length == 0) return; query = query.split(/[\s,\+

  • JavaScript自动内存管理与垃圾回收策略详细分析讲解

    目录 自动内存管理 垃圾回收策略 标记清理策略 引用计数策略 内存管理技巧 解除引用 const和let变量声明 自动内存管理 JavaScript编程语言通过自动内存管理实现内存分配和闲置资源回收. 简单来讲就是:只要确定某个变量X不会再被使用了,就将变量X占用的内存进行释放.这种判断是周期性执行的,即:垃圾回收程序隔一定时间就会自动执行一次,以释放某些不必要的内存开支. JavaScript垃圾回收过程中的难点在于:如何正确判定一块内存是否还有用? 垃圾回收策略 在C/C++程序中,我们记忆

  • JavaScript正则方法replace实现搜索关键字高亮显示

    JavaScript正则方法replace实现搜索关键字高亮显示

    前言 正则表达式是字符串处理工具中强有力的工具.也有人认为这只是一个小玩具,但不管怎么说都离不开它. 这里介绍的是JavaScript的正则表达式的replace方法 ,和实现搜索关键字高亮的功能. 先介绍一下正则表达式的replace方法 replace介绍 w3school原文链接介绍 正则表达式如何使用特殊字符$来表示原来的文本,这是实现搜索高亮的关键, var str = "asad sad 123 sd qwe21"; str.replace(/\d+/img,"数

  • 如何防止JavaScript自动插入分号

    在 JavaScript 中,行尾的分号有一种自动插入机制,这样子,可以容忍某些朋友忽略了输入分号. 当然你最好养成输入分号的习惯,同时掌握 JavaScript 是如何处理忽略输入分号的情况的,因为这种知识有助于你理解没有分号的代码. JavaScript语言有一个机制:在解析时,能够在一句话后面自动插入一个分号,用来修改语句末尾遗漏的分号分隔符.然而,由于这个自动插入的分号与JavaScript语言的另一个机制发生了冲突,即所有空格符都被忽略,因此程序可以利用空格格式化代码. 这两种机制的冲

  • JavaScript知识点总结(十)之this关键字

    this是Javascript语言的一个关键字.随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this指的是,调用函数的那个对象.JavaScript中的this指针是一个动态的变量,一个方法内的this指针并不是始终指向定义该方法的对象的.Javascript中this关键字通常指向当前函数的拥有者. 下面通过代码给大家介绍下.具体代码如下所示: <script type="text/javascript"> function Person()

  • JavaScript 自动完成脚本整理(33个)

    如果你也正准备在这方面提升自己网站的用户体验,下面为你准备了33个JavaScript自动完成脚本,当然还包括用Jquery实现的.1. Proto!TextboxList (演示地址)=700) window.open('/upload/20091020155954866.jpg');" src="http://files.jb51.net/upload/20091020155954866.jpg" onload="if(this.offsetWidth>'

  • JavaScript自动点击链接 防止绕过浏览器访问的方法

    做支付宝帐号登录,需要做一个效果,就是打开链接页面的时候,不需要点击链接,直接跳到支付宝登录页面.也就是说,需要做一个自动点击链接的效果. 基本都是用这个: <body onLoad="autoclick('auto')"> <a id='auto' href=".$url."><img border='0' src='images/alipaylog.gif' /></a> </body> <scr

  • javascript自动生成包含数字与字符的随机字符串

    本文实例讲述了javascript自动生成包含数字与字符的随机字符串的方法.分享给大家供大家参考.具体如下: 这里主要用到Math.random() 和 Math.floor() 两个函数 Math.random()   -- 返回0和1之间的伪随机数 可能为0,但总是小于1,[0,1) Math.floor()    -- 向下取整,舍掉小数字后的值 实现随机多位数的方法: 复制代码 代码如下: /** * *    随机生成数字 * *@param num 生成数字位数 */  functi

  • asp(JavaScript)自动判断网页编码并转换的代码

    完整的示例代码如下: 复制代码 代码如下: <%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>JavaScript自动判断网页编码并转换</titl

  • javascript与jquery中的this关键字用法实例分析

    本文实例分析了javascript与jquery中的this关键字用法.分享给大家供大家参考,具体如下: this 表示当前的对象,这个当前对象可以是表单,<p>等任何元素 1.javascript中this的用法: JS部分: <script type="text/javascript"> function chimg(obj){ obj.src="./images/2.jpg"; } </script> HTML部分: 复制代

随机推荐