<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<META name="Author" content="Sheneyan" />
<script type="text/javascript">
function encode(s){
return s.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/([\\\.\*\[\]\(\)\$\^])/g,"\\$1");
}
function decode(s){
return s.replace(/\\([\\\.\*\[\]\(\)\$\^])/g,"$1").replace(/>/g,">").replace(/</g,"<").replace(/&/g,"&");
}
function highlight(s){
if (s.length==0){
alert('搜索关键词未填写！');
return false;
}
s=encode(s);
var obj=document.getElementsByTagName("body")[0];
var t=obj.innerHTML.replace(/<span\s+class=.?highlight.?>([^<>]*)<\/span>/gi,"$1");
obj.innerHTML=t;
var cnt=loopSearch(s,obj);
t=obj.innerHTML
var r=/{searchHL}(({(?!\/searchHL})|[^{])*){\/searchHL}/g
t=t.replace(r,"<span class='highlight'>$1</span>");
obj.innerHTML=t;
alert("搜索到关键词"+cnt+"处")
}
function loopSearch(s,obj){
var cnt=0;
if (obj.nodeType==3){
cnt=replace(s,obj);
return cnt;
}
for (var i=0,c;c=obj.childNodes[i];i++){
if (!c.className||c.className!="highlight")
cnt+=loopSearch(s,c);
}
return cnt;
}
function replace(s,dest){
var r=new RegExp(s,"g");
var tm=null;
var t=dest.nodeValue;
var cnt=0;
if (tm=t.match(r)){
cnt=tm.length;
t=t.replace(r,"{searchHL}"+decode(s)+"{/searchHL}")
dest.nodeValue=t;
}
return cnt;
}
</script>
<style type="text/css">
.highlight{background:red;font-weight:bold;color:white;}
</style>
</head>
<body>
<form onsubmit="highlight(this.s.value);return false;">
<p><input name="s" id="s" title="搜索内容：" value="中华民国" /><input type="submit" value="搜索"/></p>
</form>
<div id="content">
<p>1911年十月十日，国父孙中山先生和革命党同志们经历了十次革命失败，
</div>
</body>
</html>
以上是互联网版本的页面，
而我主要是针对文章内容（包括从word复制到编辑器，其中有相关样式及文字格式控制内容）的搜索；
使用上页的代码我经过测试，在ie中会出现{searchHL}，但本人对js RegExp不太精通，故做以下修改
var i =0;
function highlight(){ ......
i=i+1;
t=t.replace(r,"<span class='highlight2'>$1</span>");
t=t.replace(r,"<span class='highlight2'>$1</span>");
obj.innerHTML=t;
if(i/2==1){
highlight();
}
}
分享到：
相关推荐
### 纯JS长文章分页代码解析 在网页开发中，为了提高用户体验及加载速度，经常需要将过长的文章内容进行分页处理。本文基于提供的文件内容，深入解析一个用纯JavaScript实现的文章分页代码。 #### 核心概念与功能 ...
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言，它主要负责处理客户端的交互和动态内容。在网页中实现站内搜索功能，JavaScript扮演着至关重要的角色，因为它可以在用户输入时实时更新结果，无需每次查询...
标题中的“一个用js实现的页内搜索代码”是指在网页中使用JavaScript语言编写的一种功能，使得用户可以在当前页面内快速查找指定的关键词。描述部分给出了一段HTML表单和JavaScript代码，展示了如何构建和执行这个...
【标题】：“文章内容网站系统简体文章内容网站系统简体” 这个标题可能是指一个针对中文用户的网站内容管理系统，简体版本，意味着该系统专门设计用于管理和发布简体中文的文章内容。这类系统通常包含一系列功能，...
总的来说，XML+JavaScript实现静态页搜索及分页功能，需要理解XML的数据结构，熟练运用JavaScript进行数据操作和DOM交互。这样的组合既保留了XML的数据组织优势，又利用了JavaScript的动态特性，为用户提供了流畅的...
JavaScript，简称JS，是一种广泛应用于Web开发的轻量级、解释型编程语言，以其灵活性和丰富的功能特性在前端和后端都有广泛应用。本篇文章将深入探讨JavaScript的核心概念和技术，包括但不限于代码实例、原型等关键...
在开发文章内容管理系统时，常见的技术选型包括使用PHP、Python、Java等后端语言，结合MySQL、PostgreSQL等关系型数据库，前端则常用HTML、CSS、JavaScript以及Vue.js、React.js等框架。此外，考虑到性能和扩展性，...
标题中提到的“搜索当前页面内容的js代码”是指使用JavaScript编写的一段代码，其作用是在网页中实现搜索功能，让访问者可以通过输入关键词来查找页面上存在的信息。这通常涉及对页面内DOM元素的遍历和匹配操作，...
本压缩包“css实现文章内容页文字大小切换.zip”提供了一个实用的功能，即在文章内容页中轻松切换文字大小，提升用户体验，特别是对视力不佳或偏好不同阅读体验的用户。这个功能通常通过JavaScript库如jQuery来辅助...
在实际应用中，Turn.js 可以结合其他技术，如Ajax加载远程内容，实现动态加载新的章节或文章。同时，还可以与其他jQuery插件集成，比如添加搜索功能或社交媒体分享按钮，提升用户体验。 总结来说，Turn.js 是一个...
老Y文章管理系统源码是一款专为文章发布设计的软件系统，其主要功能是提供一个方便、高效的平台，让用户能够轻松地管理和发布文章内容。这款源码的亮点在于它的易用性和灵活性，使得用户无需深入理解复杂的编程语言...
HTML5横向滑动切换文章页面布局是一种现代网页设计技术，主要利用HTML5的新特性与JavaScript库结合，提供用户友好的互动体验。在这个布局中，文章被组织成多个面板，每个面板包含一篇或一组相关的内容。在屏幕的可见...
1. 文章内容提取：JavaScript可以解析HTML文档结构，提取文章的主要内容，去除广告和其他无关元素，提供更纯净的阅读体验。 2. 保存离线阅读：使用浏览器的存储API（如localStorage或IndexedDB），JavaScript可以将...
1. 当select输入框中每输入一点内容的时候，在option中找出与内容匹配的选项显示在option的前面选项中。 2. 如何获取每次输入的内容，当keyup的时候触发函数。 问题：select标签中可以输入内容吗？(解决：另一篇文章...
在这里，我们可以使用事件监听器来捕获用户在搜索框中的输入，然后通过AJAX（异步JavaScript和XML）向服务器发送请求，请求的内容是用户输入的关键词。 当用户在搜索框中输入时，`search.js`中的函数会被调用，该...
《爱文文章管理系统》是一款专为管理文章内容而设计的高效工具，主要应用于网站运营和内容发布领域。作为一款文章管理系统，它集成了多种功能，旨在优化文章的创作、存储、分类、检索以及发布流程，从而提升网站内容...
标题中的"漂亮文章类源码"表明这是一份与文章管理相关的源代码，可能是用于创建一个网站或Web应用，用于展示、管理和互动文章内容。源码通常包括HTML、CSS、JavaScript以及后端语言如ASP（Active Server Pages）的...
3. **index.php**：首页文件，可能包含欢迎信息，最新文章展示，或者一个导航栏引导用户到其他页面，如文章列表、搜索页或登录/注册页面。 4. **add.php**：这个文件可能是用于添加新文章的界面和处理添加操作的...
首先，Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它以其异步、非阻塞I/O模型而著称，非常适合处理大量的并发连接，尤其适合构建实时、数据密集型的Web应用。在文章分享系统中，Node.js可以作为后端...
用户发表的文章会被存储到数据库中，搜索功能则依赖于查询语句从数据库中检索相关信息，而回复文章则需要处理用户的输入，并将其与原帖关联起来存储。 标签“bbs”通常代表Bulletin Board System（电子公告板系统）...