繁体   English   中英

使用位置值以编程方式选择div中的文本属于该文本

[英]Selecting text in a div programmatically using position values belong to that text

我有一个div,里面有一个文本。我希望根据字符的位置值以编程方式选择该文本的一部分。

<div id="textdiv">
Hello world. I am a friend.
</div>

我希望选择“llo world”部分( 我的意思是突出/选择就像在输入/ textarea中选择内容一样 )。 在那种情况下,位置值是第一(3)和最后(10)。

如何使用位置值以编程方式执行此操作?

这是一个简单的方法:

 function selectTextRange(obj, start, stop) { var endNode, startNode = endNode = obj.firstChild startNode.nodeValue = startNode.nodeValue.trim(); var range = document.createRange(); range.setStart(startNode, start); range.setEnd(endNode, stop + 1); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } selectTextRange(document.getElementById('textdiv'), 3, 10); 
 <div id="textdiv"> Hello world. I am a friend. </div> 


文字高亮:

 function highlightRange(el, start, end) { var text = el.textContent.trim() el.innerHTML = text.substring(0, start) + '<span style="background:yellow">' + text.substring(start, end) + "</span>" + text.substring(end); } highlightRange(document.getElementById("textdiv"), 3, 10) 
 <div id="textdiv"> Hello world. I am a friend. </div> 

代码没有任何错误检查。 使用风险自负!

 function highlight(pattern) { var text = $("#textdiv").text(); var around = text.split(pattern); $("#textdiv").html(around[0] + "<span class='highlight'>" + pattern + "</span>" + around[1]); } $(document).ready(function() { highlight("world"); }) 
 .highlight { background-color: yellow; } 
 <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> <div id="textdiv"> Hello world. I'm Hugo! </div> 

尝试使用.html()String.prototype.slice() 选择“LLO世界”呼叫.slice()与参数3, 12

 $("#textdiv").html(function(i, html) { var selected = html.slice(3, 12); return html.replace(new RegExp("("+selected+")"), "<mark>$1</mark>") }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div id="textdiv"> Hello world. I am a friend. </div> 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM