使用jQuery替换/操作HTML字符串中的元素

Question

我有一个html字符串（不是DOM），我想使用jquery进行操作。为什么这个不起作用：

var html = '<div><h4><a class="preview-target" href="content.html">Headline</a></h4></div>';
console.log(html);

var elem = $('h4', $(html));
// replace "Headline" with "whatever" => Doesn't work
elem.replaceWith("whatever");

console.log(html);

我有一个 jsfiddle 在这里 进行测试。

上面的代码只是一个简化示例。实际的 HTML 更加复杂，因此我肯定需要依赖 jQuery 来操作 HTML 字符串。

- nachtigall

Answer 1

当您修改jQuery对象时，它不会更改字符串文字中的值。

您可以使用

var html = '<div><h4><a class="preview-target" href="content.html">Headline</a></h4></div>';
console.log(html);

var $html = $('<div />',{html:html});
// replace "Headline" with "whatever" => Doesn't work
$html.find('a').html("whatever");

console.log($html.html());

示例：Fiddle

- Arun P Johny

---

当您修改jQuery对象时，它不会更改字符串字面值中的值。为什么呢？这对我来说似乎是一个错误？！ - nachtigall

@ArunPJohny 我不理解 var $html = $('<div />',{html:html}); 这段代码到底是做什么的？看起来像是创建一个对象？那个 <div /> 是干嘛用的？它是添加到原始 HTML 中还是选择现有字符串中的 div？ - Adam Youngers

@AdamYoungers $('<div />',{html:html}); - 创建一个DOM div元素，并将html的值设置为其innerHTML。 - Arun P Johny

重要的关键在于，“它不会改变字符串字面值中的值”。 "$($('select').html())" 就能实现你想做的事情，例如 $($('select').html()).find('h4').remove()。 - vkGunasekaran

Answer 2

你可以找到h4，然后调用replaceWith方法。

var html = $('<div><h4><a class="preview-target" href="content.html">Headline</a></h4></div>');

console.log(html.html());
html.find('h4').replaceWith('whatever')
console.log(html.html());

Jsfiddle

- Peter Rasmussen

Answer 3

var html = '<div><h4><a class="preview-target" href="content.html">Headline</a></h4></div>';
var replaced=html.replace("Headline","whatever");
console.log(replaced);

试试这个

- Vicky Gonsalves

---

好的，但是为什么我的上面的代码不起作用呢？我上面的代码只是一个简化的例子，真正的代码是更加复杂的HTML，我不能使用简单的“replace”方法来操作它。所以我需要jQuery。 - nachtigall

@A.Wolff 没问题，但这只适用于我的最小工作示例代码，而不适用于我更复杂的代码。在这种情况下，我需要依赖jQuery。我已经更新了问题涉及到这一点。 - nachtigall