Get und ersetzen Text containing :: in einem div

Question

Wie kann ich jquery verwenden, um :: 123 ::, 123 (als ID) zu finden, dann ändern Sie es in ein Bild in einem div, das viele Zeilen hat.

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

Ergebnisse seien:

<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 die Inhalte in den Leitungen sind nur Beispiel.

Wie kann ich das tun?

Answer 1

folgt ersetzen Diese beliebige Anzahl Sie mit einem verwandten <img> in doppelten Doppelpunkte haben tag:

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

http://jsfiddle.net/khk4a/

Sie könnten hier die HTML-Ersetzungslogik überdenken, die Quelle wäre für eine Suchmaschine oder einen Textleser ziemlich umständlich. Verwenden Sie einen anderen Hook, z. B. einen leeren <i> mit einem Klassen- oder Datenattribut.

Answer 2

Hier ist ein Beispiel:

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

Sie wollen wahrscheinlich würde es verallgemeinern mit einer beliebigen Anzahl zu arbeiten.

BEARBEITEN: Aktualisiert, um die in der Regex gefundene Nummer zu übernehmen und unter Verwendung von $1 in die Verknüpfung einzufügen.

EDIT 2: Nochmals aktualisiert, um mit einer beliebigen Nummer zu arbeiten.

Answer 3

Versuchen Sie den folgenden Code.

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

Answer 4

Ich denke, dass Jquery leicht check this

Answer 5

lösen kann Wenn Sie den Zugriff auf die zugrunde liegende HTML-Struktur haben, würde ich Dich :: 123 :: mit einem anderen leeren HTML-Elemente empfehlen ersetzen, mit einem besonderen Klasse. Zum Beispiel

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

wäre dann

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

Dann jquery verwenden Sie die Elemente zu ersetzen, wie

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