用于 HTML 字符串的 jQuery replaceWith()

Question

我正在使用filter() 选择元素列表，然后尝试使用replaceWith() 替换它们。 html 保存为变量上的字符串。看来replaceWith() 不适合我。当我记录变量content 时，它会显示原始字符串。

我知道 js 对象是引用吗？所以，我的印象是替换选择也会替换字符串中的元素。

这是代码

var content = '<div class="feature-box" contenteditable="false" data-sh-attr="%20title%3D%22jhk%22%20width%3D%224%22%20icon%3D%22thumbs-up%22" data-sh-content="kj"><div class="btn-panel"><a class="delete" href="#"><i class="fa fa-trash"> </i></a> <a class="edit" href="#"><i class="fa fa-pencil"> </i></a></div><div class="feature-icon-container"><i class="fa fa-thumbs-up main-icon"> </i></div><div class="feature-content"><h3>jhk</h3><div class="content">kj</div></div><div> </div></div><p>[block background_color="red" color="white"]Content of the block[/block]</p><p>This is an example page. It\'s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:</p><blockquote><p>Hi there! I\'m a bike messenger by day, aspiring actor by night, and this is my blog. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin\' caught in the rain.)</p></blockquote><p>...or something like this:</p><div class="feature-box" contenteditable="false" data-sh-attr="%20title%3D%22kk%22%20width%3D%224%22%20icon%3D%22thumbs-up%22" data-sh-content="kk"><div class="btn-panel"><a class="delete" href="#"><i class="fa fa-trash"> </i></a> <a class="edit" href="#"><i class="fa fa-pencil"> </i></a></div><div class="feature-icon-container"><i class="fa fa-thumbs-up main-icon"> </i></div><div class="feature-content"><h3>kk</h3><div class="content">kk</div></div><div> </div></div><blockquote><p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.</p></blockquote><p>As a new WordPress user, you should go to <a href="http://localhost/l/factory/wp-admin/">your dashboard</a> to delete this page and create new pages for your content. Have fun!</p>';


jQuery(content).filter('.feature-box').each(function(){
    var $this = jQuery(this);   
    var attr = decodeURIComponent($this.data('sh-attr'));
    var content = decodeURIComponent($this.data('sh-content'));
    var shortcode = '[feature' + attr + ']' + content + '[/feature]';
    $this.replaceWith(shortcode);

});
console.log(content);

jsFiddle 玩

http://jsfiddle.net/du8d45tt/

Answer 1

您正在创建一个 dom 结构并正在修改该 dom 结构，这不会修改原始字符串

要获取更新的html，需要获取dom结构的更新内容。

var $tmp = $('<div />', {
    html: content
})

$tmp.find('.feature-box').each(function () {
    var $this = jQuery(this);
    var attr = decodeURIComponent($this.data('sh-attr'));
    var content = decodeURIComponent($this.data('sh-content'));
    var shortcode = '[feature' + attr + ']' + content + '[/feature]';
    $this.replaceWith(shortcode);

});

var replaced = $tmp.html()
console.log(replaced);

演示：Fiddle

Answer 2

您实际上并没有在任何地方分配更新的 html。 $this.replaceWith(shortCode); 更新 $this 不是 content。

您可以使用.html() 获取更新的内容并将其分配回来。
content = $this.replaceWith(shortcode).html();

由于 jQuery each 方法的 asynchronous 特性，它运行回调，您还应该在每个函数中包含 console.log。

jQuery(content).filter('.feature-box').each(function(){
    var $this = jQuery(this);   
    var attr = decodeURIComponent($this.data('sh-attr'));
    var content = decodeURIComponent($this.data('sh-content'));
    var shortcode = '[feature' + attr + ']' + content + '[/feature]';
    content = $this.replaceWith(shortcode).html();
    console.log(content);
});

Answer 3

字符串在 JavaScript 中是不可变的对象，所以你需要用另一个值覆盖它：

content = jQuery('<div>', {html: content})
  .find('.feature-box')
    .replaceWith(function() {
      var $this = jQuery(this);   
      var attr = decodeURIComponent($this.data('sh-attr'));
      var content = decodeURIComponent($this.data('sh-content'));

      return '[feature' + attr + ']' + content + '[/feature]';
    })
    .end()
  .html();

这也使用.replaceWith(fn) 语法作为.each() 的便捷快捷方式，并在内部使用.replaceWith()。