使用jQuery替换HTML的特定部分

Question

我正在尝试查找HTML代码的特定部分，并使用jQuery将其替换为另一部分。我用jsfiddle尽可能简单地复制了这个问题：

http://jsfiddle.net/2pBcj/

在示例中，当鼠标退出DOM时，我试图将字体从斜体更改为粗体。我正在使用replace，但它不起作用。我不知道该改变什么。

$(this).html().replace('<em>', '<strong>').replace('</em>', '</strong>');

Answer 1

你正在获取并替换html，但最后没有用它做任何事情。试试这个：

$(this).html(
    $(this).html().replace('<em>', '<strong>').replace('</em>', '</strong>')
);

http://jsfiddle.net/2pBcj/3/

我个人会采用以下方法：

$(this).find('em').each(function() {
    $(this).replaceWith($('<strong />').html($(this).html()));
});

http://jsfiddle.net/PTf42/

Answer 2

.html（）方法和后续的.replace（）方法返回一个字符串。如果你想用字符串替换html，你需要用更新后的字符串设置$（this）.html（）。

var updatedHtml = $(this).html().replace('<em>', '<strong>').replace('</em>', '</strong>');
$(this).html(updatedHtml);

Answer 3

replace不是就地方法，即便如此，也不意味着将调用.html（内容）。如果replace是一个inplace调用，则返回的字符串将被更改，但不会更改真正的内部原始html。

请考虑您只需一步即可完成此操作：

var str_ = $(this).html();
str_.replace(...).replace(...);

如您所见，html内容不会被修改。

由于replace方法不在位，所以它甚至是WORSE，因此str_和str_.replace(...).replace(...)会有不同的对象。

你必须包装你的

$(this).html().replace('<em>', '<strong>').replace('</em>', '</strong>');

在$（this）.html（...）调用中：

$(this).html($(this).html().replace('<em>', '<strong>').replace('</em>', '</strong>'));

Answer 4

或者，您可以使用此方法替换标记：

$(this).find('em').each(function() { 
  $(this).replaceWith($('<strong>' + this.innerHTML + '</strong>'));
});