如何使用jQuery从HTML字符串中删除元素

Question

我有一个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标签。有人能告诉我我的代码有什么问题吗？

这是我的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>

- Mosijava

Answer 1

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>

- Farhad Bagherlo

Answer 2

由于<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>

- charlietfl

Answer 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>

- Hassan Imam