I have a div and there is a text in it.I want a part of that text to be selected programmatically according position value of characters.
<div id="textdiv">
Hello world. I am a friend.
</div>
I want "llo world" part to be selected( I mean highlighted/selected like making selection of content in an input/textarea ). In that case position values are first (3) and last (10).
How can i do that programmatically using position values?
Here is a simple way to to this:
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>
Text highlight:
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>
Code without any error checking ahead. Use at your own risk!
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>
Try using .html()
, String.prototype.slice()
. To select "llo world" call .slice()
with parameters 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.