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

Question

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?

You could have a real text-cursor-selection or a text-background, what do you want? — CoderPi, Jan 12 '16 at 15:49
Why don't you use input/textarea? Or let me rephrase: what are you actually trying to do? — Hubert Grzeskowiak, Jan 12 '16 at 15:53
i am trying to select a text in textarea and then show selected text in a div — cinfis, Jan 12 '16 at 15:55
Dude, this is a wholly different question now. Please edit or better ask a NEW question about "how to retrieve cursor selected text from a textarea and show it in a div". — Hubert Grzeskowiak, Jan 12 '16 at 16:03
well everybody missed that part -> "I mean highlighted/selected like making selection of content in an input/textarea". — cinfis, Jan 12 '16 at 16:05
We didn't miss it. We just understood it in another way than you were trying to say it. Highlighting and selecting are also two different things. And you said you wanted to select text in a div, not in a textarea. — Hubert Grzeskowiak, Jan 12 '16 at 16:07
i know how to get cursor position, what i dont know is to show it selected in another div. — cinfis, Jan 12 '16 at 16:07
i want part of text in a div selected (selected as in textarea/input)! — cinfis, Jan 12 '16 at 16:08
please try to select a text in input/textarea and see the difference between it and highlighting only — cinfis, Jan 12 '16 at 16:09

CoderPi · Accepted Answer · 2016-01-12T16:17:16.677

11

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>

edited Jan 12 '16 at 16:17

answered Jan 12 '16 at 15:56

CoderPi

12,985
4
34
62

thanks for the answer!!! but this is not what i want. I want highlighting as in textarea or input. – cinfis Jan 12 '16 at 15:57
i got error in addrange(range) method and it says: The given range and the current selection belong to two different document fragments. – cinfis Jan 12 '16 at 16:38
i have no idea what it is :( – cinfis Jan 12 '16 at 17:08
@cinfis in this example? – CoderPi Jan 12 '16 at 17:23
yes...actually i think your code works great. But when i try it in my code i got error for some reason. – cinfis Jan 12 '16 at 17:25
@cinfis and how should I guess where the error is when I don't have your code? – CoderPi Jan 12 '16 at 17:28

score 1 · Answer 2 · answered Jan 12 '16 at 16:01

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>

score 0 · Answer 3 · answered Jan 12 '16 at 15:56

0

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>

answered Jan 12 '16 at 15:56

guest271314

1
15
104
177

i want selection as in textarea/input text selection – cinfis Jan 12 '16 at 15:59
1

@cinfis _"this is not what i want."_ , _" want selection as in textarea/input text selection"_ ? No `input` , `textarea` elements appear at Question ? – guest271314 Jan 12 '16 at 16:00

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

3 Answers3

Linked