模拟浏览器搜索框

逻辑及过程（代码只包含第一种）

1.某类标签中文字含有搜索字符串的标签颜色属性更新（是整个字符串变色，不是只匹配的字符串变色—有些情况下加span标签带颜色显不出来）。
2.把搜索到的字符串加span标签变色,如：搜索“城市”,把代码中所有“城市”替换为"城市"。
3.更新过程
a.每次输入框内容变更后开始匹配（可提前记录原先搜索区/搜索标签的颜色属性值为数组，更新时把匹配到字符串的标签设置为特定属性，其余的更新为原始值）
b.记录html初始代码，每次用此代码替换搜索字符串为加span内容

<input type="text" id="search_box" value="" style="position:fixed;top:0;right:0;">
//html代码
<script type="text/javascript" src="./js/jquery-3.5.1.js" charset="utf-8"></script>
<script>
$(document).ready(function(){
var zg=[];//匹配到的字符串所在text标签在html整个text标签中位置的数组中）
var n=0;//该定位到第几个匹配到的位置，输入框变更内容后，多个内容可按回车轮番定位到对应位置
var v='';//
var bs='#FC03F5';//标记色
var jz_str=[];//所有text标签的fill属性的数组
$("text").each(function(){
	jz_str.push($(this).attr('fill'));
});
//输入框内容变化后匹配并定位
$('#search_box').on("input",function(){
	searchDomain();
});
$(document).keydown(function(event){
	if(event.keyCode==13 && zg.length>0){
		var ts=$('text').eq(zg[n]).closest("svg").offset().top;//滚动条要滚动到的高度
		$("html,body").animate({scrollTop:ts+"px"}, 500);
		n=n+1;
		//滚到底后，继续从第一个开始滚动
		if(n>=zg.length){
			n=0;
		}
	}
});	
function searchDomain() {
	zg=[];
    var searchText = $("#search_box").val();
    //循环text标签匹配内容后标记
    $("text").each(function (index,value) {
        var dataVal = $(this).text();
		if(searchText !='' && searchText != null && dataVal != "" && dataVal != null && dataVal.indexOf(searchText) != -1){
			$(this).attr('fill',bs);//匹配到的属性值更改
			zg.push(index);//匹配到的记住第几个位置对应text在html中真实位置
        }else{
			if($(this).attr('fill')==bs){
				$(this).attr('fill',jz_str[index]);//没有匹配到的还原原属性值
			}
		}
    });
	if(zg.length>0){
		var t=$('text').eq(zg[0]).closest("svg").offset().top;//获取当前标签顶部距离页面顶部的高度
		$("html,body").animate({scrollTop:t+"px"}, 500);//定位到第一个位置
	}
	//
	if(zg.length>1){
		n=1;
	}else{
		n=0;
	}
}
});
</script>