獲取並替換文本containsig ::內部div

Question

我如何使用jquery查找:: 123 ::，獲取123（作爲一個id），然後將其更改爲一個圖像內有多行的div。

在div：

<div id="msg"> 
<ul> 
    <li class="message">hello</li> 
    <li class="message">123</li> 
    <li class="message">thrid line ::123::</li> 
    <li class="message">yes</li> 
    <li class="message">sure</li> 
    <li class="message">fourth line ::123::</li> 
</ul> 
</div> 

結果將是：

<div id="msg"> 
<ul> 
    <li class="message">hello</li> 
    <li class="message">123</li> 
    <li class="message">thrid line <img src="image?id=123"></li> 
    <li class="message">yes</li> 
    <li class="message">sure</li> 
    <li class="message">fourth line <img src="image?id=123"></li> 
</ul> 
</div> 

P/S線路中的內容只是例子。

我該怎麼做？

Answer 1

這將取代任何號碼，你有雙冒號內與相關<img>標籤：

$('.message').each(function() { 
    $(this).html($(this).html().replace(/::([^:]+)::/g,'<img src="image?id=$1">')); 
}); 

http://jsfiddle.net/khk4a/

您可能會在這裏重新考慮HTML替代邏輯，對於搜索引擎或文本閱讀器來說，源代碼會很尷尬。嘗試使用另一個鉤子，f.ex帶有類或數據屬性的空<i>。

Answer 2

下面是一個例子：

http://jsfiddle.net/5ZAvK/3/

你可能會想概括它與任意數量的工作。

編輯：更新爲採取在正則表達式中找到的數字，並將其插入鏈接使用$1。

編輯2：再次更新以使用任何數字。

Answer 3

試試這個波紋管的代碼。

$("li.message").each(function() 
{ 
    var newText = $(this).text().replace(/::123::/g, '<img src="image?id=123">'); 
    $(this).text(newText); 
}); 

Answer 4

我認爲jQuery的可以解決，很容易check this

Answer 5

如果你有機會到底層的HTML結構，我建議你用另一張空白html元素取代:: 123 ::，特別類。例如，

<li class="message">thrid line ::123::</li> 

然後將

<li class="message">thrid line <span class='replaceMe' data-key="myId"></span></li> 

然後使用jQuery來代替內容如下

var replaceableElements = $('.replaceMe'); 
replaceableElements.each(function(){ 
    var me = $(this), 
     myId = me.data('key'); 
    me.replaceWith('<img src=image?id="'+ myId +' />'); 
});