解析和处理作为字符串输入的 DOM答案

【问题标题】：Parse and handle DOM that came as a string input解析和处理作为字符串输入的 DOM
【发布时间】：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？你来这里的目的是什么？

标签： javascript jquery html xml dom

【解决方案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 中返回错误...有什么建议吗？