<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关键字高亮</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<style type="text/css">
#demo .Highlight{
color: red;
}
#text .Highlight{
color: red;
}
</style>
</head>
<body>
<p id="demo">我是关键字的高亮显示文本，高亮的文字有JavaScript，还有CSS，以及HTML5！</p>
<p id="text">我是关键字的高亮显示文本，高亮的文字有JavaScript，还有CSS，以及HTML5！</p>
<script type="text/javascript">
var Highlight = {
arr : [],
init : function (ops){
this.arr[ops.id] = {
id : ops.id,
arr : ops.arr
}
this.show(this.arr[ops.id]);
},
show : function (obj){
obj.html = document.getElementById(obj.id).innerHTML;
for (var i = 0 ; i < obj.arr.length ; i ++) {
// 全局匹配 替换
var reg = new RegExp(obj.arr[i],'g');
obj.html = obj.html.replace(reg,"<span class='Highlight'>"+obj.arr[i]+"</span>");
}
document.getElementById(obj.id).innerHTML = obj.html;
}
}
window.onload = function (){
// 使用方法
// id 必须
// 默认为id 高亮内容添加class为 Highlight span 标签包裹，直接在style中写样式即可
Highlight.init({id:"demo",arr:["JavaScript","CSS","HTML5"]});
Highlight.init({id:"text",arr:["文本","高亮"]});
}
</script>
</body>
</html>
javascript 实现指定字符高亮
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 以删除一个字符串中的空格为例。 删除一个字符串中的所有指定字符 得到结果： 删除一个字符串开头的指定字符 得到结果...
- 替换第一个 这段代码相当于用原生 JavaScript 实现"abcdgbcjh0".replace("bc", ...
- //判断当前字符串是否以str开始//先判断是否存在function是避免和js原生方法冲突，自定义方法的效率不如...
- 原文地址：Javascript实现点击按钮复制指定区域文本 html5的webAPI接口可以很轻松的使用短短的几行...
