Jquery 解析html字符串并提取标记id的最佳方法是什么$（）v.$。解析HTML v$过滤器。？

如果没有标记，则1$html\u str有效：

仔细阅读文档可以发现这是预期的行为：jQuery的文档，即$，表示：

返回匹配元素的集合

…attr的文档中说：

获取集合中第一个元素的属性值 匹配元素

…标签上没有id

2 jQuery文档还说：

要将字符串显式解析为HTML，请使用$.parseHTML方法

而$.parseHTML文档说：

将字符串解析为DOM节点数组

因为这只是一个包含非jQuery对象的javascript数组，为了在数组上使用jQuery函数，您必须将数组转换为jQuery对象，这也是$可以做的：

jQuery(elementArray)

elementArray
Type: Array
An array containing a set of DOM elements to wrap in a jQuery object.

换句话说，您需要执行以下操作：

var js_dom_node_array = $.parseHTML(html_str);
var $jquery_obj = $(js_dom_node_array);

这可以归结为一个奇怪的结构：

var $jquery_obj = $($.parseHTML(html_str));

让我们来试一试：

$(document).ready(function() {
  var $jquery_obj = $($.parseHTML('<select id="select1" name="select1"> \
    <option value="o1">hello</option> \
    <option value="o2">world</option> \
  </select>'));

  var id = $jquery_obj.attr("id")
  console.log(id); //=> select1

}); 

嗯？为什么会这样

---

忽略这一异常现象，为什么需要$.parseHTMLhtml_str呢？根据：

jQueryhtmlString与jQueryselectorString

在1.9之前，如果字符串 字符串中的任何位置都有HTML标记。这有可能 导致代码意外执行并拒绝有效的选择器字符串。 从1.9开始，如果字符串以 小于请记住.attr'id'返回当前jQuery集合中第一个元素的id属性的值

嗯？为什么会这样

因为默认情况下会剥离标记，因此元素将成为jQuery集合中的第一个元素。引述：

[…]除非keepScripts显式为true，否则jQuery.parseHTML不会在解析的HTML中运行脚本

另一方面，$htmlString保留标记，因此.attr'id'在script元素中查找不存在的id属性

这是因为$html_str.filterselect返回一个jQuery集合，其第一个也是唯一一个元素是要从中检索id的select元素

最后，正如Wumpus所评论的，由于标记之间的空白，两个$.parseHTML示例产生不同的结果

在这两个示例中，脚本标记都被剥离。其中一个示例的脚本标记和选择标记之间有空格，因此创建了一个文本节点：

console.log($.parseHTML('<script>alert("hello");<\/script> \
<select id="select1" name="select1"> \
<option value="o1">hello</option> \
<option value="o2">world</option> \
</select>')); // [textNode, select#select1]

console.log($.parseHTML('<script>alert("hello");<\/script><select id="select1" name="select1"> \
<option value="o1">hello</option> \
<option value="o2">world</option> \
</select>'));  // [select#select1]

然后，这些数组被馈送到$，并且尝试从textNode检索.attr'id'失败，返回undefined

我相信你已经解决了你问题中的其余部分

哪一个是最好的？

---

这实际上取决于您的用例。只要代码看起来更干净，我个人会一直使用$。当然，您可以将$.parseHTML与keepScripts一起使用，以提供更多的未来证明，以防HTML变得更复杂，并且可能不会以一个标记开始，因为$.parseHTML在默认情况下带标记1，这不是我对文档的解释，事实上，当我console.log$.parseHTML返回的数组长度是2，而不是1。2在馈送到$.parseHTML的html中有两个标记示例，它们产生两个不同的结果。@7stud 1您可以看到它实际上剥离了脚本标记。请参见，文档可以做得更详细一些。2不知道我是否理解，介意发张小提琴吗？我很确定这与parseHTML剥离脚本标记和元素顺序有关。您的两个parseHTML示例之间的区别是标记之间的空白，它被转换为返回数组中元素之间的文本节点。这个文本节点是删除脚本后数组中的第一个节点，因此attr在那里查找，没有找到id。我为$.parseHTML发布了两个示例，一个示例中id未定义，另一个示例中id为“select1”，一个示例中数组由$.parseHTML返回数组，长度为2，另一个示例中长度为1。@7stud请参见Wumpus的注释，他找到了拼图的最后一块我会准备一把小提琴并更新答案。忽略这一个异常，为什么需要$.parseHTMLhtml_str？根据-你链接和引用的解释已经足够了吗？你不会得到比你所引用的更详细的解释。

$(document).ready(function() {
  var $jquery_obj = $($.parseHTML('<select id="select1" name="select1"> \
    <option value="o1">hello</option> \
    <option value="o2">world</option> \
  </select>'));

  var id = $jquery_obj.attr("id")
  console.log(id); //=> select1

}); 

$(document).ready(function() {
  var $jquery_obj = $($.parseHTML('<script>alert("hello");</script> \
  <select id="select1" name="select1"> \
    <option value="o1">hello</option> \
    <option value="o2">world</option> \
  </select>'));

  var id = $jquery_obj.attr("id")
  console.log(id);  //=> undefined

}); 

$(document).ready(function() {
  var $jquery_obj = $($.parseHTML('<script>alert("hello");</script><select id="select1" name="select1"> \
    <option value="o1">hello</option> \
    <option value="o2">world</option> \
  </select>'));

  var id = $jquery_obj.attr("id")
  console.log(id);  //=> select1

}); 

$(document).ready(function() {
  var $html = $('<script>alert("hello");</script><select id="select1" name="select1"> \
    <option value="o1">hello</option> \
    <option value="o2">world</option> \
  </select>');

  var id = $html.filter("select").attr("id");
  console.log(id); //=> select1

}); 

$(html_str).filter("select").attr("id")

console.log($.parseHTML('<script>alert("hello");<\/script> \
<select id="select1" name="select1"> \
<option value="o1">hello</option> \
<option value="o2">world</option> \
</select>')); // [textNode, select#select1]

console.log($.parseHTML('<script>alert("hello");<\/script><select id="select1" name="select1"> \
<option value="o1">hello</option> \
<option value="o2">world</option> \
</select>'));  // [select#select1]