将整个HTML文档从字符串解析为jQuery

时间：2015-06-05 22:55:02

标签： jquery

我有一个$.get来电提取的文件，它是一个庞大的HTML文档。我需要使用jQuery从中获取元素。

我正在尝试这个（在coffeescript中）：

$.get url, (data) ->
  title = $(data).find('title').text()

这不起作用。在浏览器控制台中，我将其缩小到$(document.documentElement.outerHTML).find('title')，其中document.documentElement.outerHTML给出了文档的字符串。

我已尝试jQuery.parseHTML，结果相同。

2 个答案:

答案 0 :(得分：6)

它不起作用的原因是因为jQuery期望DOM节点找到'title'标签。如您所述，您需要先解析html文本。

从here和here，解决方案是解析字符串并将其附加到时间div（或其他元素）中：

var tempDom = $('<div></div>').append($.parseHTML(str));

然后，您可以操纵tempDom来查找元素。

工作演示：http://codepen.io/anon/pen/wKwLMP

答案 1 :(得分：1)

TL; DR ...使用DOMParser API 

var htmlString = "<html><head><title>Name</title></head><body><div class='content'>Hello</div></body></html>";
var htmlDoc = (new DOMParser()).parseFromString(htmlString, "text/xml");

不幸的是，目前的答案并没有碰到很多极端情况

您应该 不要 使用$.parseHTML(htmlString)，因为它会立即造成损失。如果我们检查$.parseHtml上的源代码，它将调用buildFragment，这将创建一个临时DOM元素并设置innerHTML属性。

innerHtml Parsing

元素。innerHTML提供了以下API：

这是Html Fragment Parsing Algorithm

的规范

以示例字符串为例，这是尝试各种HTML解析方法的结果：

var htmlString = "<html><head><title>Name</title></head><body><div class='content'>Hello</div></body></html>";

function ParseHtmlTests() {

  /*** $.parseHTML ***/
  var $parseHtml = $.parseHTML(htmlString)

  console.LogOutput(
    '1. $.parseHTML',
    $parseHtml,
    $parseHtml.map(function(el, i) { return el.outerHTML }),
    $($parseHtml).find("title").text(),
    $($parseHtml).find(".content").text()
  )


  /*** tempDiv.innerHTML ***/
  var tempDiv = document.createElement("div")
  tempDiv.innerHTML = htmlString

  console.LogOutput(
    '2. tempDiv.innerHTML',
    tempDiv,
    tempDiv.outerHTML,
    $(tempDiv).find("title").text(),
    $(tempDiv).find(".content").text()
  )


  /*** divAppendContents ***/
  var $divAppendContents = $('<div></div>').append(htmlString)

  console.LogOutput(
    '3. divAppendContents',
    $divAppendContents,
    $divAppendContents.html(),
    $divAppendContents.find("title").text(),
    $divAppendContents.find(".content").text()
  )


  /*** tempHtml.innerHTML ***/
  var tmpHtml = document.createElement( 'html' );
  tmpHtml.innerHTML = htmlString;

  console.LogOutput(
   '4. tempHtml.innerHTML',
    tmpHtml,
    tmpHtml.outerHTML,
    tmpHtml.getElementsByTagName('title')[0].innerText,
    tmpHtml.getElementsByClassName('content')[0].innerText
  )


  /*** DOMParser.parseFromString ***/
  var htmlDoc = (new DOMParser()).parseFromString(htmlString, "text/xml");

  console.LogOutput(
    '5. DOMParser.parseFromString',
    htmlDoc,
    htmlDoc.documentElement.outerHTML,
    htmlDoc.documentElement.getElementsByTagName('title')[0].innerHTML,
    htmlDoc.documentElement.getElementsByClassName('content')[0].innerHTML
  )
}

/*** Create Console Log Methods ***/
console.group = console.group || function(msg) {
  console.log(msg)
}
console.groupEnd = console.groupEnd || function(msg) {
  console.log("----------------------------")
}
console.LogOutput = function(method, dom, html, title, content) {
  console.group(method);
  console.log("DOM:", dom)
  console.log("HTML:", html)
  console.log("Title:", title)
  console.log("Content:", content)
  console.groupEnd();
};

/*** Execute Script ***/
ParseHtmlTests()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

这是上述脚本在chrome中的输出：

Output

最好的方法似乎是通过设置临时HTML文档的innerHTML或使用DOMParser API来创建HTML Root对象

进一步阅读：

相关问题
最新问题