Есть ли способ заменить часть текста навнутри <p>?

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>