用JS让文章内容指定的关键字加亮

单关键词：

<div id="txt">
用JS让文章内容指定的关键字加亮

小楼昨夜又春风，云雨巫山数落红。

花径不曾缘客扫，蓬门今次为君开。

</div>
<script language="JavaScript">
txt.innerHTML = txt.innerHTML.replace(/文章/gi,"<font color=red>文章</font>");
</script>

多关键词：

<div id="txt">
用JS让文章内容指定的关键字加亮

舍南舍北皆春水，但见群鸥日日来。

花径不曾缘客扫，蓬门今始为君开。

盘餐市远无兼味，樽酒家贫只旧醅。

肯与邻翁相对饮，隔篱呼取尽余杯。

</div>
<script language="JavaScript">
txt.innerHTML = txt.innerHTML.replace(/(文章)|(日)|(花)/gi,"<font color=red>$1$2$3</font>"); 
</script>

关于Code的说明：

字符含义
$$ $ （JScript 5.5 或更新版本）
$& 指定与整个模式匹配的 stringObj 的部分。（JScript 5.5 或更新版本）
$` 指定由 $& 描述的匹配之前的 stringObj 部分。（JScript 5.5 或更新版本）
$' 指定由 $& 描述的匹配之后的 stringObj 部分。（JScript 5.5 或更新版本）
$n 捕获的第 n 个子匹配，此处 n 为从1到9的十进制一位数。（JScript 5.5 或更新版本）
$nn 捕获的第 nn 个子匹配，此处 nn 为从01到99的十进制两位数。（JScript 5.5 或更新版本）
g，全局模式匹配
i，不区分大小写匹配

从文本入手，改变文字的颜色：

<pre>
用JS让文章内容指定的关键字加亮

事了拂衣去，深藏功与名。

谁能书阁下，白首太玄经。

</pre>

<script language="JavaScript">
function highlight(key)
{
var key = key.split('|');
for (var i=0; i<key.length; i++)
{
var rng = document.body.createTextRange();
while (rng.findText(key[i]))
rng.pasteHTML(rng.text.fontcolor('red'));
}
}
highlight('文章|下|白首'')
</script>

转载于:https://www.cnblogs.com/sherrys/archive/2007/02/25/655601.html

用JS让文章内容指定的关键字加亮相关推荐

js 根据文章内容生成目录，锚点链接跳转，根据标题生成目录
效果图: 我们都知道锚点链接的跳转是通过<a href="#t0">标题</a>和<a name="t0"></a&g ...
phpcms 指定id范围调用_phpcms v9使用GET调用指定id文章内容、页面数据方法
不知道大家有没有相同的体会?在使用Phpcms V9建站调用数据的时候,基础的数据用默认的模板的调用语句就好了,但复杂不常见的数据怎么调用呢?我们技术可能会研究半天,怀着探索的精神不断尝试.孜孜不倦. ...
phpcms ajax 调取文章内容,Phpcms V9列表页使用GET标签调用指定文章内容的方法
十一归来,开始上班咯,假期愉快吧? 十一长假结束,CMSYOU继续分享CMS教程,与大家一起迎接新一天的开始.继续新的挑战, 一起加油! 在续之前发表的原创教程Phpcms V9列表页调用栏目第一篇文 ...
html如何取单元格内容,JS获取表格内指定单元格html内容的方法
JS获取表格内指定单元格html内容的方法本文实例讲述了JS获取表格内指定单元格html内容的方法.分享给大家供大家参考.具体如下: 下面的代码先通过表格对象的rows获得指定的行的所有单元格数组, ...
php文章内容内链功能，相同关键字只内链一次
/*** 文章详情匹配一次关键字内链** @param $content string 文章内容* @param $arr array 关键字数组* @param $url string 内链url* ...
【Jquery】-------JS实现关键字检索html内容，符合关键字的匹配项，进行标注背景色，可进行上一个，下一个切换定位
JS实现关键字检索html内容,符合关键字的匹配项,进行标注背景色核心代码全部代码展示效果核心代码全部代码这个代码主要功能: 通过关键字检索出html内容匹配项可进行上一个,下一个切换定 ...
通过纯js代码实现将指定内容复制到粘贴板(兼容各主流浏览器)
通过纯js代码实现将指定内容复制到粘贴板(兼容各主流浏览器) 1.业务需求: vue项目需要通过点击button按钮将指定内容复制到粘贴板中,且不引入第三方组件. 2.解决方案: js写法如下(这里是 ...
【Vue】vue先转化文章内容再去除标签 vue filters过滤器去除标签 js提取文字内容
问题描述渲染页面的时候,往往会遇到富文本编辑器里面的文章.文章内容有排版.字体样式,等等. 但是我们要提取其中前三行作为展示内容,里面又有标签内容.如下图原因分析: 如果我们要让页面自己识别其中的 ...
js读取外部json指定字段值完整代码_前端工程化剖析npm的包管理机制（完整版）...
导读现如今,前端开发的同学已经离不开 npm 这个包管理工具,其优秀的包版本管理机制承载了整个繁荣发展的NodeJS社区,理解其内部机制非常有利于加深我们对模块开发的理解.各项前端工程化的配置以加快 ...
gatsby_如何使用Gatsby.js来获取内容
gatsby by Dimitri Ivashchuk 由Dimitri Ivashchuk 如何使用Gatsby.js来获取内容 (How to source content with Gatsby ...

用JS让文章内容指定的关键字加亮

用JS让文章内容指定的关键字加亮相关推荐

最新文章

热门文章