在jquery中添加选择范围

Question

我遇到问题。例如，我有一个<div id="id">Helloworld</div>。现在我想选择（例如）第5到第9个单词。所以，我想有你好worl d（“worl”是高亮的）。任何想法，如何做到这一点？

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

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