javascript - 如何从字符串中去除具有属性的 HTML 标签？

Question

我有一个像 SO 这样的问答网站。我还有一个文本区域和它下面的预览(与 SO 完全相同)。我使用 Markdown 库将一些符号转换为 HTML 标签。例如，JS 库替换了 **与 <b> .好的，一切都很好。

现在我需要转义具有属性的 HTML 标签。我可以通过 PHP 做到这一点，例如 this :

<?php

$data = <<<DATA
<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>
DATA;

$dom = new DOMDOcument();
$dom->loadHTML($data, LIBXML_HTML_NOIMPLIED);

$xpath = new DOMXPath($dom);

$lines_to_be_removed = $xpath->query("//*[count(@*)>0]");

foreach ($lines_to_be_removed as $line) {
    $line->parentNode->removeChild($line);
}

// just to check
echo $dom->saveHtml($dom->documentElement);
?>

我不确定上面的代码是最好的，但正如您所见(在我链接的 fiddle 中)它按预期工作。我的意思是它删除了至少是一个属性的节点。现在我需要通过 JS (或 jQuery) (我需要这个用于那个 textarea 预览模拟器)。无论如何我该怎么做？我需要正则表达式吗？

Answer 1

你可以这样做:

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

JSFIDDLE

它不是最有效的，但如果它只是一个文本区域预览应该没问题。我建议尽可能少地运行它。据我所知，没有选择器(jQuery 或其他)会以其他方式执行此操作...因此您必须让 JS 完成这项工作。

---

根据评论编辑:

要不删除元素，只删除周围的标签，请执行以下操作:

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

JSFIDDLE