JavaScript识别网页关键字并进行描红的方法

本文实例讲述了JavaScript识别网页关键字并进行描红的方法。分享给大家供大家参考，具体如下：

这里演示JavaScript智能识别网页关键字并加红显示出来，相信这个效果大家不陌生吧，用JS加红关键字要比程序控制输出好得多，必竟将一部分功能交给了客户浏览器，相应减轻了服务器的压力。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-keyword-show-red-color-codes/

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS查询替换关键字</title>
<style type="text/css">
span{color:#f00;font-weight:bold;}
</style>
</head>
<body>
<div>我是标题:这里是文字介绍!</div>
<div>我是老二:老二的描述性文字。</div>
<script type="text/javascript">
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
  var text = divs[i].innerHTML;
  var index = text.indexOf(':');
  var span = document.createElement('span');
  span.innerHTML = text.substring(0,index+1);
  divs[i].innerHTML = text.substring(index+1);
  divs[i].insertBefore(span,divs[i].firstChild);
}
</script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • javascript网页关键字高亮代码

    //高亮网页关键字的javascript代码 var keys = [ ["脚本",http://www.jb51.net,"#ff0000"], ["小说",http://www.kanshule.com,"#00ff00"], ["念经","http://www.baidu.com","#0000ff"], ["工会","http:/

  • javascript关键字加亮加连接

    Untitled Document #box{border:1px solid #ddd;width:100px;height:100px;} 一个和尚挑水吃.两个和尚抬水吃.三个和尚没水吃.总寺的方丈大人得知情况后,就派来了一名主持和一名书记,共同负责解决这一问题.主持上任后,发现问题的关键是管理不到位,于是就招聘一些和尚成立了寺庙管理部来制定分工流程.为了更好地借鉴国外的先进经验,寺庙选派唐僧等领导干部出国学习取经:此外,他们还专门花钱请了天主教.基督教的神父传授MBA.神父呆了不久留下几个

  • javascript 关键字高亮显示实现代码

    关键字高亮显示 我们是一个专业的收集各类脚本学习资料的网站,尽量修正错误打造精品脚本类学习网站,我们为大家游戏脚本资源,源码,软件,asp,php,javascript等编程资料,是网页制作,网络编程,网站建设人士的聚集场所. 提供最新的网络编程.脚本编程.网页制作.网页设计.网页特效,为站长与网络编程从业者提供学习资料. 脚本,vbscript,正则表达式,jquery,dos,bat,批处理,javascript,Photoshop,HTML,div+css,ASP,PHP,ASP.NET

  • JavaScript实现关键字高亮功能

    高亮功能主要是指对页面中指定区域的指定文字进行高亮显示,也就是背景着色.一般在搜索结果页面会经常用到这个功能. 下面就为大家提供一种解决方案,用javascript实现. 首先在<head>中引入下面javascript方法: 复制代码 代码如下: <script type="text/javascript"> //<![CDATA[     //--------begin function fHl(o, flag, rndColor, url)-----

  • JavaScript识别网页关键字并进行描红的方法

    JavaScript识别网页关键字并进行描红的方法

    本文实例讲述了JavaScript识别网页关键字并进行描红的方法.分享给大家供大家参考,具体如下: 这里演示JavaScript智能识别网页关键字并加红显示出来,相信这个效果大家不陌生吧,用JS加红关键字要比程序控制输出好得多,必竟将一部分功能交给了客户浏览器,相应减轻了服务器的压力. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-keyword-show-red-color-codes/ 具体代码如下: <!DOCTYPE html P

  • javascript实现网页子页面遍历回调的方法（涉及 window.frames、递归函数、函数上下文）

    本文实例讲述了javascript实现网页子页面遍历回调的方法(涉及 window.frames.递归函数.函数上下文).分享给大家供大家参考.具体如下: 提炼于本人手写的纯 JavaScript 工具程序,用于遍历当前网页的所有子页面 并执行迭代回调,且回调函数返回值可用于结果回传,有助于减少闭包变量~ 其特点在于 -- 递归遍历时只检索子页面的 Window 对象,不立即执行回调函数,而是在检索结束后在普通循环结构中回调.这样可以尽量减少 递归调用时的内存消耗,也简化了程序结构,易于维护 全

  • JavaScript获取网页支持表单字符集的方法

    本文实例讲述了JavaScript获取网页支持表单字符集的方法.分享给大家供大家参考.具体如下: JavaScript获取网页支持表单的字符集可通过表单的acceptCharset方法获得 <!DOCTYPE html> <html> <body> <form id="frm1" accept-charset="ISO-8859-1"> First name: <input type="text&quo

  • JavaScript实现网页带动画返回顶部的方法详解

    服务器由阿里云换到了腾讯云,我的代码之前一直都是托管在git上的,但是搬家的时候,可能是着急了,之前有些新加的文件没有托管到git上,所以,就丢了. 不过无所谓了,可以重新写嘛. 之前博客的回到顶部功能是请之前的一位前端的同事帮忙写的,这次打算自己尝试一下. 返回顶部无非就是锚点. 第一个版本: <body style="height:2000px;"> <div id="topAnchor"></div> <a href=

  • javascript、php关键字搜索函数的使用方法

    javascript: a. 代码: /* @desc:js搜索函数,可用于关键字匹配 @param key 关键字 @param str 要搜索的字符串 @return out 匹配关键字前后出现的位置 */ function search(key,str){ var min = 0 var max = str.length var index = str.indexOf(key) var left = index - 10 var right = index + 10 if(left<min

  • 谈谈JavaScript的New关键字

    原型和闭包算是JavaScript中最常见,最难以理解,最容易被当做问题的两个部分,当然还有它们的延伸,如作用域链,继承等等吧,我最近也是各种看,各种翻,记录点自己的心得,写写总会让自己的理解更深一些.(跟标题的关系不大啦,就感慨句,每次总感觉自己懂了,再翻还是收获满满) 先谈一下JavaScript中New关键字吧,通常我们通过它来创建一个类的实例对象,在JavaScript中,实例化对象之后,也就继承了类的属性以及方法.通过代码来演示一下 function Person(name){ thi

  • JavaScript获取网页中第一个图片id的方法

    本文实例讲述了JavaScript获取网页中第一个图片id的方法.分享给大家供大家参考.具体如下: 下面的代码通过document.images获取网页中的所有图片,然后获取第一个图片的id属性 <!DOCTYPE html> <html> <body> <img id="klematis lilac" border="0" src="klematis.jpg" width="148"

  • JavaScript实现更改网页背景与字体颜色的方法

    JavaScript实现更改网页背景与字体颜色的方法

    本文实例讲述了JavaScript实现更改网页背景与字体颜色的方法.分享给大家供大家参考.具体分析如下: JavaScript,通过点击按钮更改网页背景与字体的颜色,网页中有N个改变颜色的按钮,点击不同的按钮,网页的字体与背景就会改变成不同的颜色.很简单的JavaScript小程序. 一.基本目标 一打开网页首先提示问候信息"你好" 网页中有N个改变颜色的按钮,其中返回是返回网页的默认颜色,背景是白的,字体是黑的 点击不同的按钮,网页的字体与背景就会改变成不同的颜色. 本来想做出彩虹起

  • 利用JavaScript在网页实现八数码启发式A*算法动画效果

    利用JavaScript在网页实现八数码启发式A*算法动画效果

    最近人工智能课老师布置了一个八数码实验,网上看到很多八数码的启发式A*算法,但是大多数都是利用C或者C++在控制台实现的,于是我用js在网页中做了一个类似的. 首先八数码就是一个九宫格,其中有一个空格,其他八个对应数字1-8, 移动空格,使得最后状态为有序,如下图 启发式算法是指在求解时,利用启发函数将不符合规则的解节点去掉,从而缩小问题的解空间. A*算法是利用评价函数的启发式算法,在本例中,利用当前节点状态与最终节点状态所不同的格子数来评估节点的优劣,将优越节点储存并在之后展开,将劣质节点抛

随机推荐