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图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
jQuery简单实现验证邮箱格式
Jul 15 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
javascript实现多边形碰撞检测
Oct 24 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
用PHP进行MySQL删除记录操作代码
2008/06/07 PHP
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
js cookies实现简单统计访问次数
2009/11/24 Javascript
js 自定义的联动下拉框
2010/02/07 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
javascript的几种写法总结
2016/09/30 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
layUI实现前端分页和后端分页
2019/07/27 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
python使用post提交数据到远程url的方法
2015/04/29 Python
利用python程序帮大家清理windows垃圾
2017/01/15 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
ECHT官方网站:男女健身服
2020/02/14 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
公司委托书格式范文
2014/04/04 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书