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


Posted in Javascript onNovember 09, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
IE事件对象(The Internet Explorer Event Object)
Jun 27 Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
JS实现简单抖动效果
Jun 01 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 18 Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 #Javascript
初步了解javascript面向对象
Nov 09 #Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 #Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 #Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 #Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 #Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 #Javascript
You might like
数据库中排序的对比及使用条件详解
2012/02/23 PHP
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
js异或加解密效果代码
2008/06/25 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
python切换hosts文件代码示例
2013/12/31 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
2014财务年终工作总结
2014/12/08 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
如何有效防止sql注入的方法
2021/05/25 SQL Server
OpenCV实现常见的四种图像几何变换
2022/04/01 Python