Question

我要执行的操作是强制该代码用一段图像替换“：•：”文本的一部分（如果他在段落的页面上找到它）。

$("p").each(function () { 
    if ($(this).children().length == 0) {
        $(this).text($(this).text().replace(':•:').html('<img src = "http://lilpic.png" />')); 
    } 
});

但是我最终得到的是，确实确实替换了文本，但没有替换为原来的图像，而是替换了丑陋的原始HTML代码。我究竟做错了什么？最后，我只需要一个代码即可将标记“：•：”更改为图片。

Answer 1

要获得理想的结果：

使用.html()而不是.text()来设置html。（请记住，它不再只是文本。）
使用.replace(':•:', '<img src="http://lilpic.png" />')代替.replace(':•:').html('<img src = "http://lilpic.png" />')

注意：图像将不会显示。（因为http://lilpic.png不是到图像的链接。

$("p").each(function() {

  if ($(this).children().length == 0) {
    $(this).html($(this).text().replace(':•:', '<img src="http://lilpic.png" />'));
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<p>Hello, this is some text :•:</p>

此外，您还可以对下面列出的代码进行其他一些改进。

$("p").each(function() {
  // Use $(this) instead of $(this), as it's faster
  var $this = $(this);

  if ($this.children().length == 0) {
    //Replace ':•:' with an image and store it in a variable called `newText`
    var $newText = $this.text().replace(':•:', '<img src="http://lilpic.png" />');

    //Set the new text with the replace image
    $this.html($newText);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Hello, this is some text :•:</p>

<p>Hello, this is some text :•:</p>

有没有一种方法可以在<p>中用<img src=""/>替换一部分文本？

1 个答案: