Question

我正在尝试删除<div>中的所有html格式，但特定类除外。

我试过

$('div#text :not(a.keep)').contents().each(function () {
    $(this).html($(this).text());
});

但它不会改变div的内容。

示例输入：<span>a </span><span><a class="keep">b</a></span> c

所需的输出：a <a class="keep">b</a> c

为什么？

为什么我要这样做？我有一个div，contenteditable，我想格式化用户输入的内容。我有一个计时器，每隔几秒钟我会检查div的内容以找到要格式化的东西，但我想保留已标记的内容。

Answer 1

你可以使用not selector功能。

$('div#text').not(a.keep).contents().each(function () {     
    $(this).html($(this).text()); 
});

然而对contents()的调用似乎有点奇怪，它将返回文本节点以及html节点，并且看到你正在尝试设置每个所选元素的html属性看似奇怪（没有设置的html）在文本节点上）

如果你想获取一个节点的所有文本并用该文本内容替换该节点中的任何html，那么改为

$('div#text').not(a.keep).children().each(function () {     
    $(this).html($(this).text()); 
});

但如果这是你想要完成的，我会推荐

$('div#text').not(a.keep).children().each(function () {     
    var text = $(this).text();
    $(this).empty().html(text); 
});

因为更容易看到意图。如果您可以将a.keep嵌套在其中一个选定元素中，则无法解决递归问题

Answer 2

问题在于您的.keep可能位于元素的任何位置（深层次）

这是另一种方法我们的想法是获取#text包含的所有元素，然后遍历每个元素以查看它是否符合您的要求。

这是一个示例

function getChildrenDeep(elem)
{
    var ret = [];

    $(elem).each(function(k,v){
        ret.push(v);
        if ($(v).children().length > 0) ret = $.merge(ret,getChildrenDeep($(v).children()));
    });

    return ret;
}
var plainChildren = getChildrenDeep($("#text")),
    final = '';

$(plainChildren).each(function(k,v){
    if (!$(v).hasClass("keep"))
        final += $(v).clone().children().remove().end().text(); /* See Reference */
    else
        final += $(v)[0].outerHTML;
});

document.write(final);

http://jsfiddle.net/5hjnX/4/

Reference

删除特定类除外的格式

2 个答案: