.innerHTML 丢失 HTML 语法格式-解网

问：

我刚刚注意到浏览器忽略了 HTML 格式（例如对齐此代码片段中的两个属性）：

 <div id="container">
      <div id="contained"
           other-prop="some value">
      </div>
 </div>

如果运行

var container = document.getElementById('container');
console.log(container.innerHTML);

你得到输出

<div id="contained" other-prop="some value">
</div>

无论它在源代码中的编写方式如何，或者即使您直接在 JavaScript 中设置 .innerHTML 也无关紧要。

是否可以查询用户在 JS 中编写的元素对应的页面源代码？有空白和一切。当用户使用 DOM 操作修改元素时，我可以看到存在问题，在这种情况下，如果

原始用户格式将保留所有内容，不受修改的影响，或者
可以在用户在页面加载时编写原始源代码，而无需修改 DOM

一个片段，以便您可以看到它的实际效果：

var container = document.getElementById('container');
console.log(container.innerHTML);

container.innerHTML = `  
  <div id="contained"
       other-prop="some value">
  </div>
`;

console.log(container.innerHTML);

container.children[0].setAttribute('modification', '');

console.log(container.innerHTML);

<div id="container">
  <div id="contained"
       other-prop="some value">
  </div>
</div>

javascript dom html 解析

在应用程序级别读取流。没有这方面的“文档”，因为它本质上是常识，就像没有文档说明JavaScript不能从网页访问注册表一样。访问流将退出沙箱，实质上意味着您已经获得了对操作系统级别指令执行的访问权限，因为这是应用程序执行的地方。

0赞 Peeyush Kushwaha 8/26/2019

@TravisJ抓住了你。浏览器是否也没有通过某些 API 公开流的内容？

0赞 IronFlare 8/26/2019

@PeeyushKushwaha 浏览器不会在任何 API 中公开页面的原始数据。据我所知，实现此目的的唯一方法是使用请求查询页面的文本内容，然后使用 RegEx 或找到该文本中的元素，正如我在回答中总结的那样。fetchindexOf()

答：

0赞 hmassad 8/24/2019 #1

这根本不可能。将代码视为计算机之间的消息，以表达视觉表示，其中空格并不重要。

0赞 IronFlare 8/24/2019 #2

使用常规方法，不，这是不可能的。HTML 在呈现页面时总是会丢弃多余的空格，不幸的是，无法禁用此功能。

简而言之，当你编写 HTML 代码时，你给浏览器提供了渲染什么的指令，而不是如何渲染它。当您加载页面时，浏览器会解释这些指令并输出它认为您想要的内容的呈现。

当您使用时，您请求浏览器将呈现的内容转换回 HTML 指令。它几乎完美地做到了这一点，但它不能也不会放回它删除的空格;由于该信息不会影响页面的外观，因此浏览器在呈现时会忽略它。innerHTML

如果您愿意将所有最佳实践都抛到窗外，理论上可以使用 Fetch 请求向服务器查询您所在页面的 HTML 内容，然后将响应解析为纯文本。

但是，这对于您的特定用例是有问题的，因为如果您想从本文中检索特定元素，则没有任何 DOM 方法或实用程序可供使用。如果您尝试使用 DOMParser 或类似的东西解析明文，文本将再次开始像 HTML 一样工作并丢弃多余的空格。

如果你仍然真的想这样做，你最好的办法是使用正则表达式或在明文响应中间找到你要找的元素。不过，我真的想强调，这是非常糟糕的做法，不应该用于研究以外的任何事情。.indexOf()

同样重要的是要注意，如果您尝试处理的页面是客户端生成的 SPA（单页应用程序），则此解决方案将不起作用。如果你正在处理客户端 SPA（例如，React、Angular、Vue 等），你可以对渲染脚本进行逆向工程，以找到包含空格的元素的定义。然而，除此之外，你可能不走运。

@PeeyushKushwaha我喜欢那篇帖子，我原则上同意，如果你试图解析整个页面，有更好的方法可以做到这一点。但是，对于您的用例，它要求您找到一个具有可变数量空格的任意元素，它本质上要么是这样，要么什么都没有。除了检索 HTML 文件的全文内容并以某种方式在文本中找到您要查找的元素之外，别无他法。使用 DOMParser 将其转换为 DOM 表示形式将删除空格，因此您唯一的选择是处理字符串内容。indexOf()

上一个：在 HTML5 规范中，似乎支持嵌套脚本标签，那么真实示例是什么样子的呢？

下一个：如何使用 libtidy 从 html dom 节点获取特定属性

.innerHTML 丢失 HTML 语法格式

.innerHTML loses HTML Syntax formatting

评论

评论