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 相关文章推荐
Node.js编码规范
Jul 14 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
RequireJS使用注意细节
May 15 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
详解Angular2响应式表单
Jun 14 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
vue刷新和tab切换实例
Feb 11 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
xml和web特殊字符
2009/04/28 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
python多线程抓取天涯帖子内容示例
2014/04/03 Python
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
python使用epoll实现服务端的方法
2018/10/16 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
python实现银行账户系统
2021/02/22 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
遗体告别仪式主持词
2014/03/20 职场文书
小学毕业演讲稿
2014/04/25 职场文书
企业优秀员工事迹材料
2014/05/28 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
Python实现滑雪小游戏
2021/09/25 Python