Javascript 获取并替换div中包含：：的文本

如何使用jquery查找：：123:：，将123作为id输出，然后将其更改为具有多行的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行中的内容仅为示例

我如何才能做到这一点？

以下是一个示例：

你可能想把它推广到任何数字

编辑：更新以获取在正则表达式中找到的数字，并使用$1将其插入链接

编辑2：再次更新以使用任何数字。

以下是一个示例：

你可能想把它推广到任何数字

编辑：更新以获取在正则表达式中找到的数字，并使用$1将其插入链接

编辑2：再次更新以使用任何号码。

请尝试以下代码

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

试试下面的代码

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

---

我认为jquery可以很容易地解决这个问题

我认为jquery可以很容易地解决这个问题

如果您可以访问底层的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 +' />');
});

---

如果您可以访问底层的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 +' />');
});

---

这将用相关标记替换双冒号中的任何数字：

---

您可能会重新考虑这里的HTML替换逻辑，对于搜索引擎或文本阅读器来说，源代码将非常尴尬。尝试使用另一个钩子，例如带有class或data属性的empty。

这将用相关标记替换双冒号中的任何数字：

---

您可能会重新考虑这里的HTML替换逻辑，对于搜索引擎或文本阅读器来说，源代码将非常尴尬。试着用另一个钩子，f.ex带有class或data属性的空值。

使用regex-match和replace使用regex-match和replace我认为需要使用.html而不是.text来插入IMG标记，而jQuery不会转义字符串。我认为需要使用.html而不是.text来插入IMG标记，而jQuery不会转义字符串。再次更新以适用于任何情况数字我想我应该让OP做一些推广工作，但是，我改变了它。再次更新以适用于任何数字。我想我应该让OP做一些推广工作，但是，我改变了它。