js 字符串根据开始结束索引范围值高亮显示

最新推荐文章于 2023-04-09 18:23:25 发布

weixin_43562688

最新推荐文章于 2023-04-09 18:23:25 发布

阅读量274

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_43562688/article/details/105842662

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-2.1.1.js"></script>
		<style>
			
		</style>
	</head>
	<body>
		<div>
			<button class="pre">上一个</button>
			<button class="next">下一个</button>
			<div id="pdfString">
					
			</div>
		</div>
		<script>
			
			//pdf 文章内容
			var textString = "cccasfadgADGSADVSGBHY76EGSFasdSDSDFDFFASFAfsdfadfaegsdzcccasfasfacvxcbvfhtyietjrtkyilnbzfgFwfrsbzdnfhgjfvbxcvger"
			//放进 div中
			$("#pdfString").html(textString);
			//后台传过来的数组
			var valueIndex = ["0-5", "9-12", "24-26"];
			
			var a = valueIndex[0].replace("-",",").split(",")[0];
			
			var b = valueIndex[0].replace("-",",").split(",")[1];
			
			const element = document.getElementById('pdfString');
			const textNode = element.childNodes[0];
			
			const range = document.createRange();
			
			range.setStart(textNode, a);  // Start at first character
			range.setEnd(textNode, b);    // End at fifth character
			const mark = document.createElement('mark');
			range.surroundContents(mark); 
			
			$(function(){ 
					var index1=0;
			//		下一个
					var valueIndexlenght = valueIndex.length;
					$(".next").click(function(){
						if(index1>=(valueIndexlenght-1)){
							alert("已经是最后一个了");
							return false;
						}
						index1++;
						
						$("#pdfString").html("");
						
						$("#pdfString").html(textString);
						
						var a = valueIndex[index1].replace("-",",").split(",")[0];
						
						var b = valueIndex[index1].replace("-",",").split(",")[1];
						
						const element = document.getElementById('pdfString');
						
						const textNode = element.childNodes[0];
						
						const range = document.createRange();
						
						range.setStart(textNode, a);  // Start at first character
						range.setEnd(textNode, b);    // End at fifth character
						
						const mark = document.createElement('mark');
						
						range.surroundContents(mark);
					});
			//		上一个
					$(".pre").click(function(){
						if(index1 <= 0){
							alert("已经是第一个了");
							return false;
						}
						index1--;
						
						$("#pdfString").html("");
						
						$("#pdfString").html(textString);
						
						var a = valueIndex[index1].replace("-",",").split(",")[0];
						
						var b = valueIndex[index1].replace("-",",").split(",")[1];
						
						const element = document.getElementById('pdfString');
						const textNode = element.childNodes[0];
						
						const range = document.createRange();
						
						range.setStart(textNode, a);  // Start at first character
						range.setEnd(textNode, b);    // End at fifth character
						
						const mark = document.createElement('mark');
						
						range.surroundContents(mark);
					});
				})
				
				
			
			
		</script>
	</body>
</html>