jquery页面内容查找
思路：
利用RegExp正则表达式进行匹配；
在搜索框下方显示搜索提示；
对匹配性进行高亮显示；
对多个匹配性进行逐个区别显示；
再次搜索时清除上次匹配结果；
固定搜索框。
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery页面内容查找</title>
<style>
.disshow {
display: none;
}
.highlight {
color: #fb4232;
background-color: #ff0;
border: 1px solid transparent;
}
.highlight.select {
background-color: #ddd;
border: 1px solid #999;
}
.search {
position: relative;
margin-bottom: 40px;
}
.searchTip {
padding: 5px 10px;
position: absolute;
top: 10px;
left: 0;
background: #333;
box-shadow: 4px 5px 7px 1px #999;
color: #fff;
opacity: 0.9;
}
</style>
</head>
<body>
<div class="search">
<input id="key-word" class="key-word" value="请输入搜索内容"/>
<button id="search-button">搜索</button>
<p class="searchTip disshow"></p>
</div>
<div id="mainContent">
<p>在 ES5 中，RegExp构造函数的参数有两种情况。</p>
<p>第一种情况是，参数是字符串，这时第二个参数表示正则表达式的修饰符（flag）。</p>
<p>第二种情况是，参数是一个正则表示式，这时会返回一个原有正则表达式的拷贝。</p>
<p>但是，ES5 不允许此时使用第二个参数添加修饰符，否则会报错。</p>
<p>ES6 改变了这种行为。如果RegExp构造函数第一个参数是一个正则对象，那么可以使用第二个参数指定修饰符。而且，返回的正则表达式会忽略原有的正则表达式的修饰符，只使用新指定的修饰符。</p>
<p>上面代码中，原有正则对象的修饰符是ig，它会被第二个参数i覆盖。</p>
<p>字符串对象共有 4 个方法，可以使用正则表达式：match()、replace()、search()和split()。</p>
<p>ES6 将这 4 个方法，在语言内部全部调用RegExp的实例方法，从而做到所有与正则相关的方法，全都定义在RegExp对象上。</p>
<p>ES6 对正则表达式添加了u修饰符，含义为“Unicode 模式”，用来正确处理大于\uFFFF的 Unicode 字符。也就是说，会正确处理四个字节的 UTF-16 编码。</p>
<p>上面代码中，\uD83D\uDC2A是一个四个字节的 UTF-16 编码，代表一个字符。但是，ES5 不支持四个字节的 UTF-16 编码，会将其识别为两个字符，导致第二行代码结果为true。加了u修饰符以后，ES6 就会识别其为一个字符，所以第一行代码结果为false。</p>
<p>一旦加上u修饰符号，就会修改下面这些正则表达式的行为。</p>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
<script>
(function ($) {
// $.fn===$.prototype,把fixDiv方法扩展到了对象的prototype上
// 搜索框定位
$.fn.fixDiv = function (options) {
var defaultVal = {
top: 20
}
var obj = $.extend(defaultVal, options)
$this = this;
var _top = $this.offset().top;
var _left = $this.offset().left;
$(window).scroll(function () {
var _scrollTop = $(document).scrollTop();
if (_scrollTop > _top) {
$this.offset({
top: _scrollTop + obj.top,
left: _left
});
} else {
$this.offset({
top: _top,
left: _left
});
}
});
return this;
}
}(jQuery))
$(function () {
// 调用fixDiv方法
$('.search').fixDiv({top: 10});
$('#search-button').click(hightLight);
// 回车进行搜索
$('.key-word').keydown(function (e) {
var key = e.which;
if (key == 13) hightLight();
})
var index = 0;
var historyText;
function hightLight() {
clearSelection();
var flag = 0;
var inpText = $('#key-word').val();
var regExp = new RegExp(inpText, 'g');
var content = $('#mainContent').text();
if ($.trim(inpText) == '') {
showTips('请输入查找内容');
return;
}
if (!regExp.test(content)) {
showTips('未找到匹配项');
return;
} else {
if (historyText != inpText) {
index = 0;
historyText = inpText;
}
}
$('#mainContent p').each(function () {
var html = $(this).html();
var newhtml = html.replace(regExp, '<span class="highlight">' + inpText + '</span>');
$(this).html(newhtml);
flag = 1;
})
if (flag == 1) {
var _top = $(".highlight").eq(index).offset().top;
$(".highlight").eq(index).addClass('select').siblings('.highlight').removeClass('select');
$("#search-button").html("查找下一个");
$("html, body").animate({scrollTop: _top-50});
index++;
if (index > $(".highlight").size() - 1) {
index = 0;
}
}
}
// 清除选择
function clearSelection() {
$('#mainContent p').each(function () {
$(this).find('.highlight').each(function () {
$(this).replaceWith($(this).html());
})
})
}
// 显示提示信息
function showTips(text) {
$('.search .searchTip').text(text);
$('.search .searchTip').removeClass('disshow').show();
setTimeout(function () {
$('.search .searchTip').fadeOut()
}, 2000);
}
})
</script>
</body>
</html>
赏
支付宝打赏
微信打赏
支付宝打赏
微信打赏
如果文章或资源对您有帮助，欢迎打赏作者。一路走来，感谢有您！
txttool.com 说一段 esp56物联 查询128 IP查询