在jquery中添加选择范围答案

【问题标题】：Add selection to range in jquery在jquery中添加选择范围
【发布时间】：2017-06-07 03:03:58
【问题描述】：

我有问题。例如我有一个<div id="id">Helloworld</div>。现在我想选择（例如）第 5 到第 9 个单词。所以，我想要 Helloworld （“worl”被突出显示）。任何想法，如何做到这一点？

【问题讨论】：

stackoverflow.com/questions/12459734/…
是动态的吗？如果没有，为什么不将这些字母包装在一个跨度中：<div id="id">Hello<span>worl</span>d</div>
是的，它是动态的。我需要准确的单词选择。

【解决方案1】：

使用.html() 或.text() 收集innerHTML。

HTML

<div id="id">Helloworld</div>

CSS

.highlight {
  background-color: yellow;
}

JavaScript

$(function(){
  var myText = $("#id").html();
  var newText = myText.slice(0,5) + "<span class='highlight'>" + myText.slice(5,9) + "</span>" + myText.slice(9);
  $("#id").html(newText);
});

示例：https://jsfiddle.net/Twisty/t0yu8pce/

更新

示例：https://jsfiddle.net/Twisty/t0yu8pce/2/

JavaScript

$(function() {
  var myText = $("#id").html();
  var newText = myText.slice(0, 5) + "<input value='" + myText.slice(5, 9) + "' />" + myText.slice(9);
  $("#id").html(newText);
  $("#highlight").click(function(e) {
    $("#id input:text").select();
  })
});

要选择的文本必须在 <input> 或 <textbox> 元素中。

更新 2

使用点击：https://jsfiddle.net/Twisty/t0yu8pce/3/

【讨论】：

谢谢，但我想突出显示该文本，就像您可以使用光标一样。
@VojtěchRemiš 你没有提到这一点。什么会触发这个？
我认为 select() 仅在输入中有效。它由 div 点击触发。
@VojtěchRemiš 提供了更新来回答。是的，它必须是输入框或文本框。
如果它是一个文本框，我可以只选择（例如）第 5 到第 7 个字母吗？

【解决方案2】：

不确定这是否是您想要的，但您可以使用 <mark> 或使用带有适当样式属性的 <span>。

如你的情况：

<div id="id">Hello<mark style="background-color: #f0f0f5">wor</mark>ld</div>

或者这样做

<div id="id">Hello<span style="background-color: #f0f0f5;font-weight:bold">wor</span>ld</div>

【讨论】：

我想突出显示字母，例如文本选择，您可以用光标选择。
@VojtěchRemiš 你没有提早。检查我发布的其他答案。
我不确定，你认为哪个答案？
@VojtěchRemiš 。下面发布的答案。 stackoverflow.com/a/44397592/7201256