解析html代碼並設置<span>標記

Question

<div id=bar> 
    Hey, <b>how</b> are <span><u><b>you</b>?</u></span> 
</div> 

我需要解析此代碼並將span標記設置爲由開始和結束標識的確定位置。

一個例子是：START：15 - END：16

（注意， 「開始」 和 「結束」，從簡單的字符串設定 「嘿，你好嗎？」）

<div id=bar> 
    Hey, <b>how</b> are <span><u><b>y<span id=someid>ou</span></b>?</u></span> 
</div> 

我的想法是解析節點「bar」，獲取它的html代碼，並用一個複雜的OOP算法設置span標籤，但是......這很難做到。 （JS中的所有內容）

是否有一種很好的編程語言來確定我的工作？

Answer 1

我想我會得到你想要做的。嘗試了這一點：

var text = $("#bar").text(); //jQuery gives you the text...strips the html tags 
var html = $("#bar").html(); //jQuery gives you the html and text here 

text = $.trim(text); //remove any whitespace from start and end 

var original = text.substr(14, 2); //Get the substring you want 
var updated = "<span id='someid'>" + original + "</span>"; 

html = html.replace(original, updated); //replace 
$("#bar").html(html); //set new html 

的jsfiddle這裏：http://jsfiddle.net/bbcLm97o/2/