html 区域内查找,高亮,定位,类似于Ctrl+F

2019独角兽企业重金招聘Python工程师标准>>>

//第一个参数是搜索内容输入框,第二个参数是要搜索的范围,第三个参数是,是否搜索下一个
var countIndex = 0;
function findStr(searchInput,serDivID,isNext)
{
searchText=$.trim($(searchInput).val());
if(searchText!=null && searchText!=''){
clearSelection(serDivID);
var regExp = new RegExp(searchText, 'g');
var html = $("#"+serDivID).html();
var newHtml = html.replace(regExp, ''+searchText+'');
$("#"+serDivID).html(newHtml);
var selOpt=$("#"+serDivID).find("span[class=findStyle]");
if($(selOpt).size()>0){
$("#"+serDivID).animate({
scrollTop: $("#"+serDivID).scrollTop()+$(selOpt[countIndex]).offset().top-$("#"+serDivID).height()/2
});
}
}else if(isNext=='true'){
countIndex++;
var selOpt=$("#"+serDivID).find("span[class=findStyle]");
if($(selOpt).size()<=0||$("input[targetDateDiv='"+serDivID+"']").val()!=$("#"+serDivID).find("span[class=findStyle]:first").text()){
clearSelection(serDivID);
searchText=$("input[targetDateDiv='"+serDivID+"']").val();
var regExp = new RegExp(searchText, 'g');
var html = $("#"+serDivID).html();
var newHtml = html.replace(regExp, ''+searchText+'');
$("#"+serDivID).html(newHtml);
selOpt=$("#"+serDivID).find("span[class=findStyle]");
countIndex=0;
}
if(countIndex>=$(selOpt).size()){
countIndex=0;
}
if($(selOpt).size()>0){
$("#"+serDivID).animate({
scrollTop: $("#"+serDivID).scrollTop()+$(selOpt[countIndex]).offset().top-$("#"+serDivID).height()/2
});
}
}else{
clearSelection(serDivID);
$(searchInput).val('');
}
}
function clearSelection(serDivID)
{
countIndex=0;
var resetHml1 =replaceStrAll("\","",$("#"+serDivID).html());
var resetHml = replaceStrAll("\<\/span\>","",resetHml1);
$("#"+serDivID).html(resetHml);
}
function replaceStrAll(regExpStr, replaceWith,sourceText){
    return sourceText.replace(new RegExp(regExpStr, "gi"), replaceWith);  
}

做这一部分的时候,参考了网上很多前辈的例子..感谢前辈们无私奉献

自动定位部分需要根据自己的实际情况调整

转载于:https://my.oschina.net/jockiller/blog/477434