кукловод избегает двойных кавычек в атрибуте стиля - PullRequest
Новая
       18

кукловод избегает двойных кавычек в атрибуте стиля

3 голосов
/ 12 марта 2019

Я использую кукловода Google, чтобы читать HTML, вносить в него некоторые изменения и сохранять его в новом HTML-файле.

Почти все работает правильно, кроме кукловода, в котором отсутствуют символы двойной кавычки (") как " внутри атрибута 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.

Я считаю, что я исключил кодирование как проблему.Есть идеи или исправления?

Спасибо!

1 Ответ

1 голос
/ 12 марта 2019

Задача

Такие функции, как page.content () или аналогичные функции, возвращающие HTML, предоставят вам текущее HTML-представление DOM. Однако это DOM-представление вашего HTML-кода может отличаться от заданного вами 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>
...