Question

我正在尝试从字符串中删除至少包含一个属性的HTML标记。但我需要保留他们的内容。所以假设这个字符串：

<div>
    <p>These line shall stay</p>
    <p class="myclass">Remove this one</p>
    <p>But keep this</p>
    <div style="color: red">and this</div>
    <div style="color: red">and <p>also</p> this</div>
    <div style="color: red">and this <div style="color: red">too</div></div>
</div>

我想要这个输出：

<div>
    <p>These line shall stay</p>
    Remove this one
    <p>But keep this</p>
    and this
    and <p>also</p> this
    and this too
</div>

我该怎么做？

实际上I can do that by PHP：

$dom = new DOMDocument();
$dom->loadHTML($data, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$xpath = new DOMXPath($dom);

foreach ($xpath->query("//*[@*]") as $node) {
    $parent = $node->parentNode;
    while ($node->hasChildNodes()) {
        $parent->insertBefore($node->lastChild, $node->nextSibling);
    }
    $parent->removeChild($node);
}

echo $dom->saveHTML();

正如您所看到的那样，但现在我需要通过javascript （或jQuery）来实现。那我该怎么办呢？这是我到目前为止所尝试的：

$('.myTextArea *').each(function(){
    if (this.attributes.length)
        $(this).remove();
});

Answer 1

您可以使用此函数执行此操作，该函数遵循与PHP代码几乎相同的逻辑：

＆＃13;

function cleanHtml(html) {
    var $doc = $('<span>' + html + '</span>');
    $('*', $doc).each(function (index, el) {
        if (!$(el).parents().addBack().is('pre') &&
                el.hasAttributes('attributes')) {
            while ($(el).contents().length) {
                $(el).contents().last().insertAfter(el);
            }
            $(el).remove();
        }
    });
    return $doc.html();
}

// I/O for snippet
$('button').click (function () {
    // get HTML from input textarea
    var dirtyHtml = $('.myTextArea').val();
    // clean it
    var html = cleanHtml(dirtyHtml);
    // put cleaned HTML back in textarea
    $('.myTextArea').val(html);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="myTextArea" style="width:100%" rows=10>  
<div>
    <p>These line shall stay</p>
    <p class="myclass">Remove this one</p>
    <p>But keep this</p>
    <div style="color: red">and this</div>
    <pre>do not touch <div class="myclass">this div in code</div></pre>
    <div style="color: red">and <p>also</p> this</div>
    <div style="color: red">and this <div style="color: red">too</div></div>
</div>
</textarea>

<button>Clean</button>

＆＃13;

Answer 2

您可以获取字符串并用它替换整个元素：

here

$('.myTextArea *').each(function(){
    if(this.attributes.length) {
      var string = $(this).text();
      $(this).replaceWith(string)
    }
});

Answer 3

这应该有效：

$('.myTextArea *').each(function() {
    while(this.attributes.length > 0) {
       this.removeAttribute(this.attributes[0].name);
    }
});

循环遍历所有属性并逐个删除它们。

如何仅删除HTML标记，而不删除其内容？

3 个答案: