【问题标题】:Getting unparsed (raw) HTML with JavaScript使用 JavaScript 获取未解析的(原始)HTML
【发布时间】:2010-10-11 10:08:34
【问题描述】:

我需要获取网页中某个元素的实际 html 代码。

例如,如果元素内的实际html代码是"How to fix"

运行这个 JavaScript:

getElementById('myE').innerHTML

给我"How to fix",这是解析后的 H​​TML。

如何使用 JavaScript 获取未解析的 "How to fix"

【问题讨论】:

  • 正确的 Javascript 属性是 innerHTML,而不是 innerHtml
  • 确保当您显示来自 getElementById('myE').innerHtml 的字符串时,它不会被重新解释为 HTML,从而导致不显示不间断空格代码。

标签: javascript html


【解决方案1】:

您无法获取网页部分的实际 HTML 源代码。

当您为 Web 浏览器提供 HTML 页面时,它会将 HTML 解析为一些 DOM 节点,就浏览器而言,这些节点是您文档的最终版本。 DOM 保留了 HTML 中的重要信息——就像你在单词 fix 之前使用了 Unicode 字符 U+00A0 非分隔空格——但不是你通过实体引用而不是仅仅键入来使用它的无关信息它是原始的 ( )。

当您向浏览器询问元素节点的innerHTML 时,它不会为您提供被解析以生成该节点的原始 HTML 源,因为它不再具有该信息。相反,它从存储在 DOM 中的数据生成新的 HTML。浏览器决定如何格式化该 HTML 序列化;不同的浏览器产生不同的 HTML,很可能它不会是你最初格式化它的方式。

特别是,

  • 元素名称可以大写或小写;

  • 属性的顺序可能与您在 HTML 中声明的顺序不同;

  • 属性引用可能与您的来源中的不同。 IE 经常生成不带引号的属性,这些属性甚至不是有效的 HTML;您可以确定的是,生成的innerHTML 可以安全地在同一个浏览器中使用,只需将其写入另一个元素的innerHTML

  • 它不能将实体引用用于除字符之外的任何内容,否则这些字符将无法直接包含在文本内容中:与号、小于号和属性值引号。而不是返回 ,它可能只是给你原始的 字符。

您可能无法看到这是一个不间断的空间,但它仍然是一个,如果您将该 HTML 插入另一个元素,它将充当一个。您不需要在任何地方依赖实体转义到  的不间断空格字符...如果您这样做,出于某种原因,您可以这样做:

x= el.innerHTML.replace(/\xA0/g, ' ')

但这只是转义 U+00A0 而不是其他数千个可能的 Unicode 字符中的任何一个,所以它有点可疑。

如果您确实需要获取页面的实际 HTML 源代码,您可以在自己的 URL (location.href) 中创建一个 XMLHttpRequest,并在 responseText 中获取完整的、未解析的 HTML 源代码。这样做几乎没有充分的理由。

【讨论】:

  • 好东西@bobince。我为您的 XMLHttpRequest 想法找到了一个荒谬的用例。我正在使用<picture> polyfill,而 IE9 有帮助 从 DOM 中剥离 子元素。获取未解析的 HTML 就可以了。
【解决方案2】:

你所拥有的应该工作:

元素测试:

<div id="myE">How to&nbsp;fix</div>​

JavaScript 测试:

alert(document.getElementById("myE​​​​​​​​").innerHTML); //alerts "How to&nbsp;fix"

You can try it out here。确保无论您在哪里使用,结果都不会将&amp;nbsp; 显示为空格,这很可能是这种情况。如果您想在专为 HTML 设计的某个地方显示它,则需要对其进行转义。

【讨论】:

  • 这仅适用于某些实体。 &amp;eacute; 之类的实体引用不会出现在 innerHMTML 中;取而代之的是所表示的字符,例如 é,出现在那里。
【解决方案3】:

您可以改用脚本标签,它不会解析 HTML。当有尖括号时,这更相关,例如加载 lodash 或下划线模板。

document.getElementById("asDiv").value = document.getElementById("myDiv").innerHTML;
document.getElementById("asScript").value = document.getElementById("myScript").innerHTML;
<div id="myDiv">
<h1>
<%= ${var} %> %>
How to&nbsp;fix
</h1>
</div>

<script id="myScript" type="text/template">
<h1>
<%= ${var} %>
How to&nbsp;fix
</h1>
</script>

<textarea rows="10" cols="40" id="asDiv"></textarea>
<textarea rows="10" cols="40" id="asScript"></textarea>

因为解析了 div 中的 HTML,所以括号内的 HTML 返回为

&lt;

,但作为脚本它没有。

【讨论】:

    猜你喜欢
    • 2012-02-13
    • 1970-01-01
    • 2011-09-02
    • 2017-07-21
    • 1970-01-01
    • 1970-01-01
    • 2015-12-29
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多