Question

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

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

我希望选择“llo world”部分（我的意思是突出显示/选择像在输入/ textarea中选择内容）。在这种情况下，位置值是第一（3）和最后（10）。

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

Answer 1

这是一个简单的方法：

＆＃13;

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);

＆＃13;

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

＆＃13;

文字突出显示：

＆＃13;

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)

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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");
  
  
})

＆＃13;

.highlight {
  
  background-color: yellow;
  
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<div id="textdiv">
  Hello world. I'm Hugo!
</div>

＆＃13;

Answer 3

尝试使用.html()，String.prototype.slice()。选择＆＃34; llo world＆＃34;使用参数.slice()

致电3, 12

＆＃13;

$("#textdiv").html(function(i, html) {
  var selected = html.slice(3, 12);
  return html.replace(new RegExp("("+selected+")"), "<mark>$1</mark>")
})

＆＃13;

<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>

＆＃13;

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

3 个答案: