jquery - 解析 html 字符串并提取标签 id 的最佳方法是什么？ $() v. $.parseHTML v. $().filter v.？

Question

1) $(html_str)如果没有 <script> 则有效标签:

$(document).ready(function() {

  var $select = $('<select id="select1" name="select1"> \
    <option value="o1">hello</option> \
    <option value="o2">world</option> \
  </select>');


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


}); 

但是$(html_str)当 html 包含前导 <script> 时“失败”标签:

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

  var id = $select.attr("id");
  console.log(id);  //=> script


}); 

仔细阅读文档表明这是预期的行为:jQuery() 的文档，即$() ，说:

Return a collection of matched elements

http://api.jquery.com/jquery/#jQuery2

...attr() 的文档说:

Get the value of an attribute for the first element in the set of matched elements

http://api.jquery.com/attr/

...以及 <script>标签没有 id。

2) jQuery() 文档还说:

For explicit parsing of a string to HTML, use the $.parseHTML() method.

还有$.parseHTML()文档说:

Parses a string into an array of DOM nodes.

http://api.jquery.com/jquery.parsehtml/

因为这只是一个包含非 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

}); 

这有效。现在领先<script>标签:

$(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

}); 

那是行不通的。所以$($.parseHTML(html_str))似乎工作就像 $(html_str) ，但是还有这样的:

$(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

}); 

嗯？为什么这样有效？

忽略这一异常现象，为什么是 $.parseHTML(html_str)甚至需要？根据http://jquery.com/upgrade-guide/1.9/#jquery-htmlstring-versus-jquery-selectorstring :

jQuery(htmlString) versus jQuery(selectorString)

Prior to 1.9, a string would be considered to be an HTML string if it had HTML tags anywhere within the string. This has the potential to cause inadvertent execution of code and reject valid selector strings. As of 1.9, a string is only considered to be HTML if it starts with a less-than ("<") character. The Migrate plugin can be used to restore the pre-1.9 behavior.

If a string is known to be HTML but may start with arbitrary text that is not an HTML tag, pass it to jQuery.parseHTML() which will return an array of DOM nodes representing the markup. A jQuery collection can be created from this, for example: $($.parseHTML(htmlString)). This would be considered best practice when processing HTML templates for example. Simple uses of literal strings such as $("<p>Testing</p>").appendTo("body") are unaffected by this change.

Bottom line: HTML strings passed to jQuery() that start with something other than a less-than character will be interpreted as a selector. Since the string usually cannot be interpreted as a selector, the most likely result will be an "invalid selector syntax" error thrown by the Sizzle selector engine. Use jQuery.parseHTML() to parse arbitrary HTML.

3) $(html_str).filter("select").attr("id")作品:

$(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

}); 

Answer 1

请记住 .attr('id')返回 id 的值当前 jQuery 集合中 first 元素的属性。

Huh? Why does that work?

因为 $.parseHTML 条<script>默认标记，因此 <select> element 成为 jQuery 集合中的第一个元素。引用 docs :

[...] jQuery.parseHTML does not run script in the parsed HTML unless keepScripts is explicitly true.

<小时/>

另一方面，$(htmlString)保持<script>标签，因此.attr('id')寻找一个不存在的id脚本元素中的属性。

<小时/>

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

这有效是因为 $(html_str).filter("select")返回一个 jQuery 集合，其第一个(也是唯一的)元素是 select您想要检索 id 的元素来自。

<小时/>

最后，两个$.parseHTML正如 Wumpus 所评论的，由于标签之间的空白，样本会产生不同的结果。

在这两个示例中，脚本标记都被删除。其中一个示例的 script 标记和 select 标记之间有空格，从而创建一个文本节点:

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]

然后这些数组被输入到 $() ，并尝试检索.attr('id')从 textNode 失败，无提示地返回 undefined .

<小时/>

我相信您已经弄清楚了问题中的其余部分。

<小时/>

哪一个最好？

这实际上取决于您的用例。我个人会继续使用$()只要它有效，代码看起来更干净。当然，你可以使用$.parseHTML与 keepScripts提供更多的面向 future 的能力，以防您的 HTML 变得更加复杂并且可能不以 < 开头.