Question

如何使用jquery查找:: 123 ::，获取123 out（作为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

试试这个以下代码。

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

Answer 2

以下是一个例子：

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

您可能希望将其概括为适用于任何数字。

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

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

Answer 3

我认为jquery可以轻松解决这个问题check this

Answer 4

如果您有权访问底层的html结构，我建议您将 :: 123 :: 替换为另一个具有特定类的空白html元素。例如，

<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 +' />');
});

Answer 5

这将使用相关的<img>标记替换双冒号内的任何数字：

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

http://jsfiddle.net/khk4a/

你可能会在这里重新考虑HTML替换逻辑，对于搜索引擎或文本阅读器来说，源代码会非常尴尬。尝试使用另一个钩子，f.ex一个带有类或数据属性的空<i>。

在div中获取并替换包含::的文本

5 个答案: