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