js - использование метода replace для замены html-элемента

Question

У меня есть вопрос. У меня сегодня утром работа, но я не знаю, как это сделать. Моя работа здесь (html):

<div class="demo">
    <p>this is demo text</p>
</div>

Вот мой JS:

var tempdata = $(".demo").text();
var replacedata = tempdata.replace("text","<span>1234</span>");

Смотри все ок. Но результат: this is demo <span>1234</span>. Это не мой результат, которого я хочу. Как сделать так, чтобы эта строка стала HTML-элементом с помощью метода replace?

Answer 1

При возвращении значения используйте .html() вместо .text(), чтобы оно не кодировалось, например:

var tempdata = $(".demo").text();
var replacedata = tempdata.replace("text","<span>1234</span>");
$(".demo").html(replacedata);​​​​​​

Вы можете увидеть демо здесь

Кроме того, вы можете передать метод в .html(), если вы делаете это со многими элементами, например так:

$(".demo").html(function(i, h) {
    return h.replace("text","<span>1234</span>");
});​

Обратите внимание, что в качестве источника также используется .html(), но для примера кода не имеет значения.

Вы можете увидеть демонстрацию этого здесь

Answer 2

document.getElementById('demo').firstElementChild.innerHTML =
  document.getElementById('demo').firstElementChild.innerHTML.replace(/text/, "<span>1234</span>");