以编程方式使用位置值在div中选择文本属于该文本 [英] Selecting text in a div programmatically using position values belong to that text

问题描述

我有一个div并且其中有一个文本，我希望根据字符的位置值以编程方式选择该文本的一部分.

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>

我希望选择"llo world"部分(我的意思是突出显示/选择，就像在输入/文本区域中选择内容一样).在这种情况下，位置值是前(3)和后(10).

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>

文本突出显示:

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>

这篇关于以编程方式使用位置值在div中选择文本属于该文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！