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 相关文章推荐
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
jquery中键盘事件小结
Feb 24 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
leaflet的开发入门教程
Nov 17 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
js传递数组参数到后台controller的方法
Mar 29 Javascript
vue实现数据控制视图的原理解析
Jan 07 Javascript
JavaScript实现班级抽签小程序
May 19 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
杏林同学录(八)
2006/10/09 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
php中使用GD库做验证码
2016/03/31 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
Smarty模板语法详解
2019/07/20 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
python实现大文件分割与合并
2019/07/22 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
python exit出错原因整理
2020/08/31 Python
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
导购员的岗位职责
2014/02/08 职场文书
房屋出租委托书格式
2014/09/23 职场文书
教师个人学习总结
2015/02/11 职场文书