如何使用jQuery删除html字符串中的元素

Posted 2023-02-24

【中文标题】如何使用jQuery删除html字符串中的元素

【英文标题】：how to remove an element in html string with jQuery

【发布时间】：2018-06-06 17:38:56

【问题描述】：

我有一个 html 字符串，我想将其解析为 html，然后删除任何 pre 标签和它的子标签。 我试过这个：

HTMLString = "<p>a paragraph</p><p>second Paragraph</p><pre>&lt;script&gt;&nbsp;&nbsp;&nbsp;&nbsp;function ()&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;something();&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;</pre>";
var $jQueryObject = $($.parseHTML(HTMLString));
alert($jQueryObject.find('pre').length);

但这提醒我 0 这意味着它找不到任何 pre 标记。 谁能告诉我我的代码有什么问题？

this is my fiddle

HTMLString = "<p>a paragraph</p><p>second Paragraph</p><pre>&lt;script&gt;&nbsp;&nbsp;&nbsp;&nbsp;function ()&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;something();&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;</pre>";
    var $jQueryObject = $($.parseHTML(HTMLString));
alert($jQueryObject.find('pre').length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

【参考方案1】：

它不起作用，因为<pre> 位于字符串的根级别。对于这种情况，filter() 有效，但如果它嵌套在您的另一个元素中，它将找不到另一个 <pre>

通常您希望将字符串插入另一个容器并在另一个容器上使用find()，这样您就不必担心嵌套级别。

HTMLString = "<p>a paragraph</p><p>second Paragraph</p><pre>&lt;script&gt;&nbsp;&nbsp;&nbsp;&nbsp;function ()&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;something();&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;</pre>";

//changing your code to use `filter()` 
var $jQueryObject = $($.parseHTML(HTMLString));
console.log('Filter length:', $jQueryObject.filter('pre').length)

// Using `find()` within another container
var $container = $('<div>').append(HTMLString);
console.log('Find length:', $container.find('pre').length)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

【参考方案2】：

HTMLString = "<p>a paragraph</p><p>second Paragraph</p><pre>&lt;script&gt;&nbsp;&nbsp;&nbsp;&nbsp;function ()&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;something();&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;</pre>";
    var $jQueryObject = $("<div/>").html(HTMLString);
    console.log("Befor Remove tag: "+ $jQueryObject.find('pre').length);
    $jQueryObject.find('pre').remove();
    console.log("After Remove tag: "+ $jQueryObject.find('pre').length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

【参考方案3】：

您需要使用您的 HTML 字符串通过附加到一个 DOM 元素来创建一个 DOM 树，然后您可以使用 find() 来获取 pre 标记元素。

var HTMLString = "<p>a paragraph</p><p>second Paragraph</p><pre>&lt;script&gt;&nbsp;&nbsp;&nbsp;&nbsp;function ()&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;something();&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;</pre>";
var $jQueryObject = $('<div>').append($(HTMLString));
console.log($jQueryObject.find('pre').length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>