转自：http://xdwangiflytek.iteye.com/blog/1399617
<!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>
<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
function search() {
var obj = document.getElementById("waiDiv");
var keyWord = document.getElementById("keyWord");
MarkHighLight(obj, keyWord.value, "Orange");
}
</script>
</head>
<body>
<div id="waiDiv">
<input type="text" id="keyWord" />
<input type="button" value="搜索" onclick="search()" /><br />
<br />
<div id="contentDiv">
网上说Repository是一个独立的层，介于领域层与数据映射层（数据访问层）之间。它的存在让领域层感觉不到数据访问层的存在，它提供一个类似集合的接口提供给领域层进行领域对象的访问。Repository是仓库管理员，领域层需要什么东西只需告诉仓库管理员，由仓库管理员把东西拿给它，并不需要知道东西实际放在哪
</div><br/><br/>
<textarea rows="2" cols="2" style="width:100%;height:100px;">网上说Repository是一个独立的层，介于领域层与数据映射层（数据访问层）之间。它的存在让领域层感觉不到数据访问层的存在，它提供一个类似集合的接口提供给领域层进行领域对象的访问。Repository是仓库管理员，领域层需要什么东西只需告诉仓库管理员，由仓库管理员把东西拿给它，并不需要知道东西实际放在哪</textarea>
</div>
</body>
</html>
效果：
相关推荐
在React中实现搜索结果中关键词高亮显示的核心知识点可以分为几个部分： 1. 使用React组件的状态（state）和属性（props）进行交互。 2. 利用JavaScript的filter函数对数据进行过滤。 3. 使用正则表达式（RegExp）...
实现JS多关键词高亮方法，可以改造查询条件直接引用该JS方法使用，更加简单简洁实现查询高亮关键词。多关键词当前以空格隔开演示。
总之，通过JavaScript和正则表达式，我们可以高效地实现关键词高亮显示的功能，提高用户体验，尤其是在搜索结果展示或数据分析中。通过灵活运用这两个函数，你可以根据实际需求调整匹配策略，以满足各种场景下的需求...
highlight.js是一个高亮显示插件，可实现网页上的搜索关键词高亮显示，如示例演示，在文本框中输入搜索的关键字，下面的一段文字中，所有出现搜索词的地方，都会被高亮显示，醒目的将结果显示给用户，而且使用起来...
综上所述，"js实现插入代码按代码格式关键词等高亮显示"涵盖了从代码插入到格式化再到关键词高亮的一系列步骤，通过JavaScript和相关的库工具，我们可以创建出专业且美观的代码展示效果。在实际项目中，根据需求选择...
总结来说，本文通过介绍JavaScript实现关键词高亮显示的思路和代码，揭示了在网页开发中如何利用JavaScript操纵DOM元素和字符串处理，以实现增强用户体验的功能。掌握这些知识点对于Web开发者来说是十分重要的。
要实现关键词高亮，首先需要确定关键词列表。这些关键词可以存储在一个数组中，如`['keyword1', 'keyword2', ...]`。然后，对每个关键词构建相应的正则表达式，确保关键词被正确地转义以避免特殊字符的影响。 3. *...
在网页开发中，jQuery库因其简洁的语法和强大的功能，被广泛用于实现各种交互效果，其中之一就是“关键词高亮搜索”。jQuery高亮关键词搜索通常应用于搜索引擎或者文本内容展示页面，帮助用户快速定位到他们关心的...
实现jQuery关键词高亮的基本步骤如下： 1. **引入jQuery库**：首先，你需要在HTML文档的头部添加jQuery库的链接。由于jQuery是JavaScript的一个库，它简化了DOM操作、事件处理和动画等功能，使得代码更简洁易懂。 ...
这个组件可以帮助开发者轻松地实现关键词高亮功能，提升用户在浏览和搜索文本时的体验。 首先，让我们了解React组件的基本概念。React是Facebook开源的一个JavaScript库，用于构建用户界面，尤其是单页应用。它采用...
本压缩包文件“搜索关键词 高亮标记源码.zip”很可能包含了一个实现这一功能的源代码示例。 高亮标记的核心在于文本处理和颜色样式应用。以下是一些关键知识点： 1. **文本匹配算法**：高亮标记首先需要对输入的...
综上所述，在Firefox中使用JavaScript实现关键词高亮显示的方法主要依赖于对`Range`对象的操作，而非使用IE特有的一些接口。通过上述技术点的总结，我们可以了解到如何在不同浏览器中实现类似的功能，并通过代码的...
总结来说，这个“jQuery查找关键词文字高亮显示代码”是一个实用的交互功能，它通过jQuery实现了动态高亮显示搜索关键词，提升了用户查找信息的效率。通过理解并应用上述步骤，开发者可以轻松地将这个功能整合到自己...
}在JavaScript中，对文本内容进行关键词高亮是一项常见的需求，特别是在搜索结果展示或者代码高亮时。本段代码提供了一个名为`MarkHighLight`的函数，它实现了对HTML元素内指定关键词的高亮标记功能。 首先，我们...
**jQuery高亮插件——实现文本高亮与关键词查找** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画以及...在全文检索应用中，结合关键词高亮，能更直观地展示结果，增强交互效果。
标题中的“javascript关键字实时自动高亮”指的是在网页中，通过JavaScript编程技术实现实时检测并高亮显示特定关键字的功能。这种技术常用于突出显示页面上的重要信息，提高用户阅读体验，尤其在文档、博客或者论坛...
JavaScript中的关键词高亮是一种常见的...通过理解这个案例，开发者可以掌握JavaScript中实现关键词高亮的基本技巧，并根据需求进行相应的扩展和优化，比如支持更多高亮样式、忽略特定标签内的关键词、处理HTML实体等。
1. **关键词高亮的定义**：高亮显示页面中的特定文字，通常指的是对指定区域的文字进行背景颜色或文字颜色的突出显示。 2. **应用场景**：高亮功能常见于搜索引擎返回的搜索结果页面，帮助用户快速定位到搜索内容。...
在这个名为"jQuery查找关键词文字高亮显示代码.zip"的压缩包中，包含了一个使用jQuery实现的搜索关键词高亮显示的示例。这个功能在很多场合都非常实用，比如搜索引擎结果展示或者文本搜索定位。 首先，`index.html`...