时间戳

首页 > 解决方案 > puppeteer 在样式属性中转义双引号

javascript - puppeteer 在样式属性中转义双引号

问题描述

我正在使用 Google 的 puppeteer 来读取 HTML，对其进行一些更改，然后将其保存到一个新的 HTML 文件中。

几乎一切都正常工作，除了 puppeteer 将双引号字符 ( ") 转义为属性"内部。style

例如：

style='font-size:11.0pt;font-family:"Arial",sans-serif; color:#D99594'

变成：

style="font-size:11.0pt;font-family:"Arial",sans-serif; color:#D99594"

这不仅会影响输出 HTML，还会影响我在 Puppeteer 中进行的一些处理。

我相信我已经排除了编码问题。任何想法或修复？

谢谢！

标签： javascriptnode.jspuppeteerhtml-escape-characters

解决方案

问题

page.content () 之类的函数或返回 HTML 的类似函数将为您提供 DOM 的当前 HTML 表示。但是，您的 HTML 代码的这种 DOM 表示可能与您给定的 HTML 代码不同。因此，这是预期的行为。

举一些例子：

  • Chrome 会<div/>变成<div></div>.
  • Chrome 会为属性使用双引号：<div id='a'></div>变成<div id="a"></div>
  • Chrome 会使属性小写：<div ID="a"></div>变为<div id="a"></div>
  • Chrome 将尝试修复您的代码：<div><span></div></span>变为<div><span></span></div>

自己试试

要自己测试，您可以使用以下代码。它将一些代码放入 DOM 中，然后用于innerHTML检查 DOM 的实际外观。单击底部的运行代码片段并输入您要测试的任何代码：

const el = document.querySelector("#domTester");
const output = document.querySelector('#output');

function showResult() {
  const outerElement = document.createElement('div');
  outerElement.innerHTML = el.value;
  output.value = outerElement.innerHTML;
}
el.addEventListener('input', showResult);
showResult();
<p>
  What you give to the browser:<br />
  <input id="domTester" type="text" value="<div id='a &quot; b'/>" style="width:100%" />
</p>
<p>
  What the DOM will be rendered as:<br />
  <input id="output" type="text" readonly="readonly" style="width:100%" />
</p>

推荐阅读