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?

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?

• javascript
• jquery
• css

• You could have a real text-cursor-selection or a text-background, what do you want? – CoderPi Commented Jan 12, 2016 at 15:49
• text-cursor-selection – cinfis Commented Jan 12, 2016 at 15:52
• 1 Why don't you use input/textarea? Or let me rephrase: what are you actually trying to do? – Hugo G Commented Jan 12, 2016 at 15:53
• i am trying to select a text in textarea and then show selected text in a div – cinfis Commented Jan 12, 2016 at 15:55
• 3 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". – Hugo G Commented Jan 12, 2016 at 16:03

3 Answers 3

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./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./ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="textdiv">
Hello world. I am a friend.
</div>