解析和处理作为字符串输入的 DOM
Posted
技术标签:
【中文标题】解析和处理作为字符串输入的 DOM【英文标题】：Parse and handle DOM that came as a string input 【发布时间】：2012-01-27 09:30:41 【问题描述】：事情是这样的，
我有一个充满 html 代码的 textarea（ID 为“input_container”），简单的例子是：
<!doctype html>
<html>
<head></head>
<body>
<a href="www.example.com">the other place</a>
</body>
</html>
如何解析它并在 jQuery 中将其用作合法的 DOM？ 例如，做
$(varWithDom).find(...)
使用那个 DOM？
我已经尝试过的
我尝试使用 jQuery 解析它，但发生了一件有趣的事情 - jQuery 删除了 DOCTYPE 和所有的 HEAD，只剩下我一无所有了
<a href="www.example.com">the other place</a>
我原来的方法在这里：jQuery HTML parser is removing some tags without a warning, why and how to prevent it?
我还没有找到解决方案。有任何想法吗？这可能是 jQuery 的错误还是什么？
【问题讨论】：
您真正关心哪些部分？为什么除了<body> 的内容之外，jQuery 删除所有内容很重要？根据 evan quoted in answering your previous question 的 jQuery 文档，这不是 jQuery 错误 - 这是浏览器内置的 .innerHTML 实现，它正在丢弃标签。
@MДΓΓБДLL：这很重要，因为如果查询的元素是body 的子元素，并且body 被剥离，那么.find() 将无法找到它。而是需要.filter()。
在这种情况下，只需将整个内容包裹在 <div> 中，就像 @am not i am suggests 一样。
为什么需要 HEAD 中的元素？为什么需要 DOCTYPE？你来这里的目的是什么？
【参考方案1】：
如果您需要将整个内容作为元素，您可以尝试使用iframe。
// create and append new iframe
var iframe = document.createElement('iframe');
document.documentElement.appendChild(iframe);
// set its innerHTML
iframe.contentWindow.document.documentElement.innerHTML = varWithDOM;
// grab the `window`
var win = iframe.contentWindow;
// remove the iframe
document.documentElement.removeChild(iframe);
抓取head的演示：http://jsfiddle.net/K6tR2/
原始答案
与其说是 jQuery 删除它，不如说是浏览器。这种行为在不同的浏览器中会有所不同。
您可能会尝试的一件事是将整个内容放在<div> 中，这样就可以成为您的上下文...
$('<div>' + varWithDom + '</div>').find(...)
现在剥离掉什么并不重要（除非您确实需要 <head> 中的某些东西），因为它都是外部 div 的后代。
如果您不想这样，那么您需要进行两次查询，一次使用.find()，一次使用.filter()...
var els = $( varWithDom );
var links = els.find( 'a[href]' ).add( els.filter( 'a[href]' ) );
【讨论】：
我试过了 :( 没用。jQuery 仍在剥离 和 doctype，我需要将 HTML 作为一个整体...有趣的是，当我尝试在我成功的页面中使用 jQuery 选择器的方法 - $('head') 工作正常，那么为什么不使用外部 DOM？ @user1087787：我更新了一个使用iframe 的解决方案。试一试。
刚刚在 IE9 和 FF 中测试过 - 不幸的是，他们在解析它时都遇到了问题，FF 找不到标签，IE 给我这个错误：消息：无法获取属性“innerHTML”的值：对象为空或未定义行：832 字符：3 代码：0 URI：localhost/form 消息：无法获取属性“查找”的值：对象为空或未定义行：4 字符：21213 代码：0 URI：@ 987654323@
我还从 jsfiddle (jsfiddle.net/K6tR2) 运行了您的脚本，它在 IE9 和 FF 中返回错误...有什么建议吗？以上是关于解析和处理作为字符串输入的 DOM的主要内容，如果未能解决你的问题，请参考以下文章
xiyueta.js库可以快速解析html字符串，遍历网页dom的JavaScript库