使用jQuery在div中用HTML替换字符串

Question

我有

<div class="test">hello everyone</div>

我想用以下方式更改此div中的每个问候

<h1>helllo</h1>

例如我用过

$(this).text().replace("hello", "<h1>hello<h1>");

但它输出

<h1>hello</h1>

我希望它以HTML形式而不是文本形式出现吗？

Answer 1

您的代码仅替换返回的文本。它也不会在DOM中替换，只能在javascript中使用。因此，替换文本后，请使用.html（）

渲染返回的值

var $myDiv = $('.test');
$myDiv.html($myDiv.text().replace("hello", "<h1>hello</h1>"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">hello everyone</div>

Answer 2

如果您对纯JavaScript方法感兴趣，可以使用innerHTML()属性用html替换字符串，如下所示：

var x = document.querySelector(".test");
x.innerHTML = x.innerHTML.replace("hello", "<h1>hello</h1>");

<div class="test">hello everyone</div>

Answer 3

.html（）访问和更改html，regex以<h1>hello</h1>代替hello

$(this).html($(this).html().replace(/hello/g,"<h1>helllo</h1>"));

Answer 4

嘿，我想在我的div中突出显示一个代码，但是由于我没有太多时间去做，所以我只是用highlight.js来做，但是我仍然在寻找一个好主意那

Answer 5

您为该替换编写的代码非常好，但是替换了特定的部分，而是替换了完整的div数据

1。）将div内容存储到变量中，例如var myDiv

2。）替换所需的内容

3。）将替换的部分放回音乐中

示例

jQuery(".test").html(function(){
      jQuery(this).text().replace("hello", "<h1>hello</h1>");
})