jqueryの範囲に選択範囲を追加します

Question

問題があります。たとえば、私は<div id="id">Helloworld</div>を持っています。そして今私は5番目から9番目の単語を選択したいと思います。だから、こんにちはworl d（ "worl"はhightlightedです）を持っています。任意のアイデア、どのようにこれを行うには？

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

クリック使用：これは何をしたいですが、あなたは<mark>を使用するか、適切なスタイルプロパティで<span>を使用できる場合https://jsfiddle.net/Twisty/t0yu8pce/3/

Answer 2

わかりません。あなたの場合のように

：

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