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与FireFox的JavaScript兼容问题解决办法
Dec 31 Javascript
jquery实现页面图片等比例放大缩小功能
Feb 12 Javascript
JavaScript中的原型和继承详解(图文)
Jul 18 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
Javascript实现基本运算器
Jul 15 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
微信小程序实现多图上传
Jun 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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
php字符串过滤与替换小结
2015/01/26 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
详解jQuery中的事件
2016/12/14 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
Python跳出循环语句continue与break的区别
2014/08/25 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
python3中数组逆序输出方法
2020/12/01 Python
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
大学学雷锋活动总结
2014/06/26 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
Python实现归一化算法详情
2022/03/18 Python
Python进程间的通信之语法学习
2022/04/11 Python
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL