jQuery实现页面关键词高亮

示例代码，关键位置做了注释，请查看代码：

<html>
<head>
<title>jQuery实现页面关键词高亮</title>
<style type="text/css">
* {margin: 0;
padding: 0;
}
p {padding: 10px;
margin-bottom: 20px;
}
.highlight {background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<form>
<p>
I consider that a man's brain originally is like a little empty attic, and you have to stock it with such furniture as you choose. A fool takes in all the lumber of every sort that he comes across, so that the knowledge which might be useful to him gets crowded out, or at best is jumbled up with a lot of other things, so that he has a difficulty in laying his hands upon it.
</p>
<p>
I consider that a man's brain originally is like a little empty attic, and you have to stock it with such furniture as you choose. A fool takes in all the lumber of every sort that he comes across, so that the knowledge which might be useful to him gets crowded out, or at best is jumbled up with a lot of other things, so that he has a difficulty in laying his hands upon it.
</p>
<p>
I consider that a man's brain originally is like a little empty attic, and you have to stock it with such furniture as you choose. A fool takes in all the lumber of every sort that he comes across, so that the knowledge which might be useful to him gets crowded out, or at best is jumbled up with a lot of other things, so that he has a difficulty in laying his hands upon it.
</p>
<input type="text" id="text" />
<input type="button" id="search" value="Search" />
<input type="button" id="clear" value="Clear" />
</form>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//点击search按钮时，执行highlight函数
                $('#search').click(highlight);
//点击clear按钮时，执行clearSelection函数
                $('#clear').click(clearSelection);
function highlight() {
//先清空一下上次高亮显示的内容
                    clearSelection();
//获取输入的关键词
var searchText = $('#text').val();
//创建正则表达式，g表示全局的，如果不用g，则查找到第一个就不会继续向下查找了
var regExp = new RegExp(searchText, 'g');
//遍历段落
                    $('p').each(function() {
var html = $(this).html();
//将找到的关键词替换，加上highlight属性
var newHtml = html.replace(regExp, '<span class="highlight">'   searchText   '</span>');
//更新段落内容
                        $(this).html(newHtml);
});
}
function clearSelection() {
$('p').each(function() {
//找到所有highlight属性的元素
                        $(this).find('.highlight').each(function() {
//将highlight样式去掉
                            $(this).replaceWith($(this).html());
});
});
}
});
</script>
</body>
</html>

执行运行代码，效果为：

更多专业前端知识，请上【猿2048】www.mk2048.com

jQuery实现页面关键词高亮相关推荐

搜索关键字高亮_Django Haystack 全文检索与关键词高亮
作者:HelloGitHub-追梦人物[1] 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库[2] 点击本文最下方的"阅读原文"即可获取博客提供 RS ...
Diango博客--22.Django Haystack 全文检索与关键词高亮
文章目录 1. Django Haystack 简介 2. 安装 django-haystack和elasticsearch 2 3. 构建容器来运行 elasticsearch 服务 4. 配置 H ...
[转]用 jQuery 实现页面滚动（Scroll）效果的完美方法
转自: http://zww.me/archives/25144 很多博主都写过/转载过用 jQuery 实现页面滚动(Scroll)效果的方法,但目前搜来的方法大都在 Opera 下有个小 Bug: ...
jQuery Mobile 笔记（1）- jQuery Mobile页面结构
jQuery Mobile页面解构 jQuery Mobile 的"页面"结构不同于传统的html页面,这样做是为了优化single page application的用户体验. ...
java怎么往右浮动_[Java教程]jQuery实现页面滚动时智能浮动定位
[Java教程]jQuery实现页面滚动时智能浮动定位 0 2016-08-04 18:00:08 jQuery实现页面滚动时层智能浮动定位_前端开发 * { margin: 0; padding: ...
jQuery Mobile页面返回无需重新get
jquery mobile新版中没有返回按钮的解决方案 1. 需要在页面源代码的 page 中加上 data-add-back-btn="true" . 2.同时页面的代码中加上一 ...
php jq跳转页面跳转,使用jQuery做页面跳转
这次给大家带来使用jQuery做页面跳转,使用jQuery做页面跳转的注意事项有哪些,下面就是实战案例,一起来看一下. 所以了,今天我们就来说一说如何在jQuery中跳转到另外一个网页HTML. 其实 ...
wordpress实现搜索页关键词高亮
http://www.hehaibao.com/wordpress-search-word-highlight/ 今天给网站搜索页加了关键词高亮功能,分享出来,希望对小伙伴们有所帮助. 实现效果如下图 ...
使用 jQuery Mobile 与 HTML5 开发 Web App (十二) —— jQuery Mobile 页面事件与 deferred
在系列的上一篇文章<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 事件详解>中,Kayo 介绍了除页面事件外的其他 jQuery ...

jQuery实现页面关键词高亮

jQuery实现页面关键词高亮相关推荐

最新文章

热门文章