使用 jQuery 将字符串替换为 div 中的 HTML答案

【问题标题】：Replace a string with HTML inside a div using jQuery使用 jQuery 将字符串替换为 div 中的 HTML
【发布时间】：2019-01-06 19:21:36
【问题描述】：

我有

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

我想改变这个 div 中的每个 hello

<h1>helllo</h1>

例如我用过的

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

但它输出

<h1>hello</h1>

我希望它应用为 HTML 而不是文本，我该怎么做？

【问题讨论】：

尝试使用 $(this).html() 并以相同的方式设置它
试过也没用
尝试使用类选择器？
$(this).html($(this).html().replace("hello", "<h1>hello</h1>"));
$(".code").html($(".code").html().replace("int", "<span class='var'>int</span>")); ...你写的应该是这个（没有任何包装功能）。

标签： jquery html

【解决方案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>

【讨论】：

【解决方案2】：

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

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

&lt;div class="test"&gt;hello everyone&lt;/div&gt;

【讨论】：

【解决方案3】：

.html() 访问和更改 html，正则表达式将 hello 替换为 <h1>hello</h1>

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

【讨论】：

【解决方案4】：

嘿，我想在我的 div 中突出显示一个代码，但由于我没有太多时间来做这件事，我只使用了highlight.js 来做这件事，但我仍在寻找一个好主意来做这件事

【讨论】：

【解决方案5】：

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

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

2.) 替换想要的内容

3.) 将替换的部分放回音乐

示例

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

【讨论】：

text() 将对参数进行 html 编码，html 将是 &lt;h1&gt;hello&lt;h1&gt; - 你忘记将结果保存在任何地方......而且你不使用正则表达式来匹配每个你好，只是第一个将被替换。