Замена/управление элементом в html-строке с помощью jquery

У меня есть строка 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.

Ответ 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

Ответ 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

Ответ 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);

Попробуйте это