js-使用replace方法替换html元素

Question

I have a question. I have a work this morning but i don't know how to do it. My work here (html):

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

Here is my JS:

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

Look everything ok. But result is: this is demo <span>1234</span> . This isn't my result I want. How to make in this string become a HTMLelement by using replace method?

Answer 1

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

Answer 2

When assigning the value back, use .html() instead of .text() so it won't encode it, like this:

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

You can see a demo here

Also, you can pass a method to .html() if you're doing this to many elements, like this:

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

Note this uses .html() as the source as well, but makes no difference for the example code.

You can see a demo of that here