javascript - 用于 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