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 相关文章推荐
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
javascript正则表达式中分组详解
Jul 17 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 Javascript
如何用JavaScript学习算法复杂度
Apr 30 Javascript
用JS实现飞机大战小游戏
Jun 09 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常量的详解
2013/06/09 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
2013/01/11 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
Python如何实现文本转语音
2016/08/08 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
python中如何进行连乘计算
2020/05/28 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
财务工作个人求职的自我评价
2013/12/19 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
人事任命通知书
2015/04/21 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
婚宴主持词
2015/06/30 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers