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 相关文章推荐
javascript获得CheckBoxList选中的数量
Oct 27 Javascript
JavaScript OOP类与继承
Nov 15 Javascript
用js实现in_array的方法
Nov 05 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
javascript中可能用得到的全部的排序算法
Mar 05 Javascript
js实现前端界面导航栏下拉列表
Aug 27 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
php&amp;java(三)
2006/10/09 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
原生js实现addClass,removeClass,hasClass方法
2016/04/27 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
境外导游求职信
2014/02/27 职场文书
英文投诉信格式
2015/07/03 职场文书
保护环境的宣传语
2015/07/13 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
用Python将库打包发布到pypi
2021/04/13 Python