<script type="text/javascript">
/*
* 参数说明:
* obj: 对象, 要进行高亮显示的html标签节点.
* hlWords: 字符串, 要进行高亮的关键词词, 使用 竖杠(|)或空格分隔多个词 .
* bgColor: 背景颜色,默认为红色.
*/
function MarkHighLight(obj, hlWords, bgColor) {
hlWords = AnalyzeHighLightWords(hlWords);
if (obj == null || hlWords.length == 0)
return;
if (bgColor == null || bgColor == "") {
bgColor = "red";
}
MarkHighLightCore(obj, hlWords);
//执行高亮标记的核心方法
function MarkHighLightCore(obj, keyWords) {
var re = new RegExp(keyWords, "i");
var style = ' style="background-color:' + bgColor + ';" '
for (var i = 0; i < obj.childNodes.length; i++) {
var childObj = obj.childNodes[i];
if (childObj.nodeType == 3) {
if (childObj.data.search(re) == -1) continue;
var reResult = new RegExp("(" + keyWords + ")", "gi");
var objResult = document.createElement("span");
objResult.innerHTML = childObj.data.replace(reResult, "<span" + style + ">$1</span>");
if (childObj.data == objResult.childNodes[0].innerHTML) continue;
obj.replaceChild(objResult, childObj);
} else if (childObj.nodeType == 1) {
MarkHighLightCore(childObj, keyWords);
}
}
}
//分析关键词
function AnalyzeHighLightWords(hlWords) {
if (hlWords == null) return "";
hlWords = hlWords.replace(/\s+/g, "|").replace(/\|+/g, "|");
hlWords = hlWords.replace(/(^\|*)|(\|*$)/g, "");
if (hlWords.length == 0) return "";
var wordsArr = hlWords.split("|");
if (wordsArr.length > 1) {
var resultArr = BubbleSort(wordsArr);
var result = "";
for (var i = 0; i < resultArr.length; i++) {
result = result + "|" + resultArr[i];
}
return result.replace(/(^\|*)|(\|*$)/g, "");
} else {
return hlWords;
}
}
//利用冒泡排序法把长的关键词放前面
function BubbleSort(arr) {
var temp, exchange;
for (var i = 0; i < arr.length; i++) {
exchange = false;
for (var j = arr.length - 2; j >= i; j--) {
if ((arr[j + 1].length) > (arr[j]).length) {
temp = arr[j + 1]; arr[j + 1] = arr[j]; arr[j] = temp;
exchange = true;
}
}
if (!exchange) break;
}
return arr;
}
}
//end
window.onload = function search() {
var obj = document.getElementById("container");
var keyWord = "${str}";
MarkHighLight(obj, keyWord, "Yellow");
}
</script>

web关键词搜索高亮代码的更多相关文章

  1. 基于vue实现搜索高亮关键字

    有一个需求是在已有列表中搜索关键词,然后在列表中展示含有相关关键字的数据项并且对关键字进行高亮显示,所以该需求需要解决的就两个问题: 1.搜索关键词过滤列表数据 2.每个列表高亮关键字 ps: 此问题 ...

  2. 一键生成通用高亮代码块到剪贴板,快捷粘贴兼容 TT/WX/BJ 编辑器

    有些在线图文编辑器不支持直接插入代码块,但可以直接粘贴 HTML 格式的高亮代码块. 花了一点时间研究了一下各家的编辑器,规则却各不相同.有的要求代码块被包含于 <code> ... &l ...

  3. web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识

    web前端除了关注代码功能实现,还应具备web性能优化以及SEO优化的常识 ——不会WPO.SEO的前端工程师不是好码农 作为一名web前端工程师,除了要实现上级的要求,满足其所需要的功能,还要在平时 ...

  4. JavaScript表格搜索高亮功能模拟

    在网页表格中模拟excle的搜索高亮显示功能.当在搜索框中输入需要的姓名时,若表格中存在对应的数据,则该表格背景色变为黄色. 下面为表的HTML源码: <!doctype html> &l ...

  5. [杂记]如何在ppt里插入高亮代码

    在为c语言习题课准备课件的时候发现需要向ppt内插入代码,简单的文本粘贴没有高亮,格式也很混乱需要自己慢慢调,于是自己鼓捣了一下,实现了向ppt内插入高亮代码. [所需软件]Office PowerP ...

  6. 轻量级jQuery语法高亮代码高亮插件jQuery Litelighter。

    <!DOCTYPE html><html><head><meta charset="UTF-8" /><title>jQ ...

  7. [置顶] 如何更改CSDN博客高亮代码皮肤的样式,使博客看起来更有范(推荐)

    由于本人写博客的时候,也没有配置博客的相关属性,因此贴出来的代码块都是CSDN默认的,因此代码背景色都是白色的,如下所示: 但是本人在浏览他人博客的时候,发现有些博客的代码块看起来比较有范,整个代码库 ...

  8. ANTS Performance Profiler 8:支持对Web请求、异步代码和WinRT的性能剖析

    下载与激活:http://download.csdn.net/detail/lone112/6734291 离线激活   位于英国的Red Gate Software有限公司最近发布了ANTS Per ...

  9. sublime高亮代码导出

    何在word/博客中使用SublimeText风格的代码高亮样式 原文链接:http://www.cnblogs.com/Wayou/p/highlight_code_with_sublimetext ...

随机推荐

  1. linux网络不同的解决办法

    贯标防火墙,iptables 注释掉/etc/hosts的localhost的ipv6地址映射

  2. android.database.sqlite.SQLiteCantOpenDatabaseException: unknown error(Sqlite code 14): Could not open database,(OS error - 13:Permission denied)

    07-24 15:03:14.490 6291-6291/com.tongyan.nanjing.subway E/SQLiteDatabase: Failed to open database '/ ...

  3. C语言小技巧

    /* 求阶乘时设置最大调用层数,防止栈占满 当从函数进入另一个函数时当前函数的内容会入栈,另一个函数调用完时在出栈 */ int factorial(int n, int level) { //pri ...

  4. js封装 与 js高级用法 问题集合

    1. 什么是自执行的匿名函数? 它是指形如这样的函数: (function {// code})(); 2. 疑问 为什么(function {// code})();可以被执行, 而function ...

  5. shell+Jenkins+jmeter集成

    参考http://www.cnblogs.com/ceshi2016/p/6025641.html 中除ant相关内容,shell替代ant循环执行jmeter脚本和将jtl转换为html job n ...

  6. NIO与传统IO的区别

    传统的socket IO中,需要为每个连接创建一个线程,当并发的连接数量非常巨大时,线程所占用的栈内存和CPU线程切换的开销将非常巨大.使用NIO,不再需要为每个线程创建单独的线程,可以用一个含有限数 ...

  7. [ActionScript] AS3 绘制虚线

    import flash.geom.Point; import flash.display.MovieClip; import flash.display.Graphics; function dra ...

  8. crm 4 注释与上传附件权限

    文档注释权限及上传附件是与实体的”追加到”权限有关. 文档注释权限及上传附件是与核心记录中”注释”的”追加”权限有关. 追加及追加到的权限,我的理解是与本实体有关联的实体的权限,比如你引用了其它表的字 ...

  9. java GUI之基本图形

    1.为了支持图形用户界面程序设计,java1.0的标准类库中包含一个抽象窗口工具箱(Abstract Window Toolkit,AWT). 这个工具箱极不成熟,其编程模型也不是面向对象的,有很大的 ...

  10. ElasticSearch 概述

    简介 Elasticsearch是一个基于Lucene的开源搜索引擎.Elasticsearch也使用Java开发并使用Lucene作为其核心来实现所有索引和搜索的功能,但是它的目的是通过简单的RES ...