使用Javascript/Jquery将单词替换为图像

我有这个：

$(".forum-threadview-post-text:contains(':P')").html(":P").replaceWith("<img src='http://website.com/images/emotes/tongue.png' />");

$（“.forum threadview post text:contains（“：P”）”）.html（“：P”）.replaceWith（”）；

它应该取“：p”的任何实例，并用表情符号图像替换它。但是，它使用：P获取帖子，并用该图像替换整个帖子。如何仅替换：P.

尝试

var tImg = "<img src='http://website.com/images/emotes/tongue.png' />";
$(".forum-threadview-post-text:contains(':P')").html(function (_, html) {
     return html.replace(/:P/g , tImg )
});

var tImg=”“；
$（“.forum threadview post text:contains（“：P”）”）.html（函数（551;，html）{
返回html.replace（/：P/g，tImg）
});

您的操作无法按预期工作的原因是，您正在使用图像替换匹配的元素，而不是图像的特定内容。您可以使用获取每个元素的html并替换它

或：

$（“.forum threadview post text:contains（“：P”）”）.contents（）.each（函数（）{
if（this.nodeType===3&&/:P/g.test（this.nodeValue））{
$（this.parent（）.html（this.nodeValue.replace（/：P/g，”））；
}
});

试试看

var tImg=”“；
$（“.forum threadview post text:contains（“：P”）”）.html（函数（551;，html）{
返回html.replace（/：P/g，tImg）
});

您的操作无法按预期工作的原因是，您正在使用图像替换匹配的元素，而不是图像的特定内容。您可以使用获取每个元素的html并替换它

或：

$（“.forum threadview post text:contains（“：P”）”）.contents（）.each（函数（）{
if（this.nodeType===3&&/:P/g.test（this.nodeValue））{
$（this.parent（）.html（this.nodeValue.replace（/：P/g，”））；
}
});

我认为最好不要假设文本将是传入选择器的直接子级。我还认为，假设您正在搜索的文本不能出现在子代HTML标记中有点冒险。迄今为止给出的所有其他答案至少在其中一个方面存在问题

此外，使代码可重用甚至更好。以下易于重用的函数将完全满足您的需要，不会被散乱的HTML标记属性弄乱，并且可以正常工作

function descendantContents($el, textToFind) { // this could be made a jQuery plugin
   var result = $el
      .find(':not(script)')
      .contents()
      .filter(function () {
         return this.nodeType === 3 && $(this).text().indexOf(textToFind) !== -1;
      });
   return result;
}

function replaceText(scopeSelector, textToFind, replacementHtml) {
   descendantContents($(scopeSelector), textToFind)
      .each(function () {
         var element = $(this);
         var parts = element.text().split(textToFind);
         element.before(document.createTextNode(parts[0]));
         for (var i = 1, l = parts.length; i < l; i += 1) {
            element.before(replacementHtml);
            element.before(document.createTextNode(parts[i]));
         }
         element.remove();
      });
};

function-degenantcontents（$el，textToFind）{//这可以成为一个jQuery插件
var结果=$el
.find（“：not（script）”）
.contents（）
.filter（函数（）{
返回this.nodeType==3&&$（this.text（）.indexOf（textToFind）！=-1；
});
返回结果；
}
函数replaceText（范围选择器、textToFind、replacementHtml）{
子体内容（$（范围选择器），textToFind）
.每个（功能）{
var元素=$（此）；
var parts=element.text（）.split（textToFind）；
元素之前（document.createTextNode（parts[0]）；
对于（变量i=1，l=parts.length；i

这些功能已经在Firefox 25.0.1、Chrome 30.0.1599.101 m和10.0.9200.16721中使用jQuery1.6.1进行了测试（我知道，这是一个旧版本，但这会让你感觉更好，而不是更糟）

对于希望做得更好的人，请针对以下HTML尝试您的代码：

<div>
   <div>will this <span title="alt:Private">really</span> work :P</div>
</div>

这真的有效吗

我认为最好不要假设文本将是传入选择器的直接子级。我还认为，假设您正在搜索的文本不能出现在子代HTML标记中有点冒险。迄今为止给出的所有其他答案至少在其中一个方面存在问题

此外，使代码可重用甚至更好。以下易于重用的函数将完全满足您的需要，不会被散乱的HTML标记属性弄乱，并且可以正常工作

function descendantContents($el, textToFind) { // this could be made a jQuery plugin
   var result = $el
      .find(':not(script)')
      .contents()
      .filter(function () {
         return this.nodeType === 3 && $(this).text().indexOf(textToFind) !== -1;
      });
   return result;
}

function replaceText(scopeSelector, textToFind, replacementHtml) {
   descendantContents($(scopeSelector), textToFind)
      .each(function () {
         var element = $(this);
         var parts = element.text().split(textToFind);
         element.before(document.createTextNode(parts[0]));
         for (var i = 1, l = parts.length; i < l; i += 1) {
            element.before(replacementHtml);
            element.before(document.createTextNode(parts[i]));
         }
         element.remove();
      });
};

function-degenantcontents（$el，textToFind）{//这可以成为一个jQuery插件
var结果=$el
.find（“：not（script）”）
.contents（）
.filter（函数（）{
返回this.nodeType==3&&$（this.text（）.indexOf（textToFind）！=-1；
});
返回结果；
}
函数replaceText（范围选择器、textToFind、replacementHtml）{
子体内容（$（范围选择器），textToFind）
.每个（功能）{
var元素=$（此）；
var parts=element.text（）.split（textToFind）；
元素之前（document.createTextNode（parts[0]）；
对于（变量i=1，l=parts.length；i

这些功能已经在Firefox 25.0.1、Chrome 30.0.1599.101 m和10.0.9200.16721中使用jQuery1.6.1进行了测试（我知道，这是一个旧版本，但这会让你感觉更好，而不是更糟）

对于希望做得更好的人，请针对以下HTML尝试您的代码：

<div>
   <div>will this <span title="alt:Private">really</span> work :P</div>
</div>

这真的有效吗

查看jQuery中的

内容（）。。。也许有更好的方法。@ErikE嗯，我认为这种方法也应该有效，因为smileys不是gng，不能用作html标记的一部分：）。但是，使用contents和检查nodeType会使它更具体……当内容应该是文本节点时，它只会让我有勇气替换HTML。说“不会被使用”是穷人的赌注+1现在。但是等等，这个例子怎么样：
。我不认为这太牵强了，我更愿意看到你引导人们找到更能证明正确的答案@埃里克哈哈，这是一个非常疯狂的例子，可以在任何地方出现。。。是的，你是对的。我刚刚被OPs html片段迷住了…：）事实上您的第二个代码块有几个问题。在
上试一试这真的有效吗：P
了解一些需要克服的挑战。查看jQuery中的
内容（）。。。也许有更好的方法。@ErikE嗯，我认为这种方法也应该有效，因为smileys不是gng，不能用作html标记的一部分：）。但是，使用contents和检查nodeType会让它变得更简单