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

//第一个参数是搜索内容输入框,第二个参数是要搜索的范围,第三个参数是,是否搜索下一个

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("\","",resetHml1);

$("#"+serDivID).html(resetHml);

}

function replaceStrAll(regExpStr, replaceWith,sourceText){

return sourceText.replace(new RegExp(regExpStr, "gi"), replaceWith);

}

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

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