搜索——页面内搜索与替换

从页面呈现内容中搜索关键字，请求后台实现搜索过程繁琐、效率低、性能低，通过前端实现页面内搜索可以减少前端与后台的交互，效率也更高。以下代码实现了页面内搜索：

1、页面

<div id="header" class="header">
<div id="search-box">
<input class="text" id="search-text" type="text" />
<input class="btn" id="search-btn" type="button" value="查找" />
<input class="text" id="replace-text" type="text" />
<input class="btn" id="replace-btn" type="button" value="替换" />
<input class="btn" id="replace-all-btn" type="button" value="全部替换" />
<div id="tip-box"></div>
</div>
</div>
<div id="section" class="section"> <!-- 页面内容 --></div>

2、css

.header{
margin: 70px 0;
width: 100%;
}


#search-box{
margin: 0 auto;
width: 70%;
min-width: 500px;
height: 100px;
line-height: 50px;
font-size: 14px;
text-align: left;
}


#search-box>.text{
margin: 0 10px;
padding: 0 10px;
width: 70%;
min-width: 200px;
border: 1px solid #fff;
border-radius: 5px;
box-shadow: 0 0 5px 0 #ccc;
height: 30px;
line-height: 30px;

color: #8e8e8e;
}
#search-box>.btn{
margin: 0 0 0 5px;
padding: 0 20px;
background-color: #e8e8e8;
border: none;
border-radius: 5px;
height: 35px;
line-height: 35px;
}

.highlight { 
background-color: #00f; 
color: #fff;
}
.highlight_focus{
background-color: #f00; 
color: #fff;
}

3、js

/**
 * 查找
 * 1、点击【查找】
 * 2、敲击【回车】
 *
 */
$('#search-btn').on('click', search);
$('#search-text').on('keydown', function (e) {
var key = e.which; 
if (key == 13) search(); 
});


/**
 * 替换：点击【替换】/【全部替换】
 *
 */
$('#replace-btn').on('click', replace);
$('#replace-all-btn').on('click', replaceAll);

/**
 * 搜索
 * 1、判断关键字是否为空
 * （1）若为空：定位到搜索框
 * （2）若不为空：进行第2步
 * 2、判断关键字是否为新的关键字
 * （1）若为新关键字：
 * ① 初始化参数
 * ② 清空高亮显示的旧关键字
 * ③ 高亮显示所有新关键字
 * ④ 定位到第一个关键字位置
 * （2）若为旧关键字：查找下一个关键字并定位
 */

var preSearch = '';
var search = function(){
var html = $('#section').html();
var searchText = $('#search-text').val();
if(searchText){//搜索关键字不为空
var regExp = new RegExp(searchText, 'g');
if(regExp.test(html)){
// 搜索新的关键字
if(preSearch != searchText){
// 初始化参数
common.initParam();
preSearch = searchText;

// 清空高亮显示
common.clearHighlight();

// 高亮显示所有关键字
var highlightHtml = html.replace(regExp, '<span class="highlight">'+searchText+'</span>');
$('#section').html(highlightHtml);
}

//查找下一个
common.searchNext();

}
}else{
$('#search-text').focus();
}
}


/**
 * 替换
 *
 */
var replace = function(){
if($('.hightlight').length == 0){
search();
}
var replaceText = $('#replace-text').val();
$('.highlight_focus').replaceWith(replaceText);
index = (index - 1)%$('.highlight').length;
common.searchNext();
}

/**
 * 全部替换
 *
 */
var replaceAll = function(){
if($('.hightlight').length == 0){
search();
}
var replaceText = $('#replace-text').val();
$('.highlight,.highlight_focus').replaceWith(replaceText);
common.initParam();
}

// 高亮显示字符索引
var index = 0;

var common = {

// 初始化参数
initParam : function(){
index = 0;
preSearch = '';
},

// 清空高亮显示
clearHighlight : function(){
$('#section').find('.highlight').each(function(){ 
var _this = this;
$(_this).replaceWith($(_this).text());//将他们的属性去掉； 
}); 
},

// 高亮显示所有关键字
setHighlight : function(){

var regExp = new RegExp(searchText, 'g');
if(!regExp.test(text)){
//提示
}else{
text.replace(regExp, '<span class="highlight">'+text+'</span>');
}
},

// 关键字定位
location : function(){
var tagTop = $('.highlight_focus').offset().top;
var currentScrollTop = $(document).scrollTop();
if(tagTop > 240){
$(document).scrollTop(tagTop - 240);
}else{
$(document).scrollTop(0);
}
},

// 查找下一个
searchNext : function(){
// 高亮效果
$('.highlight_focus').removeClass('highlight_focus');
$('.highlight').eq(index)
.focus()
.addClass('highlight_focus');
// 定位
common.location();

// 索引更新
index++;
index = index%$('.highlight').length;
}
}