Javascript не может найти определенные элементы HTML - PullRequest
Новая
       4

Javascript не может найти определенные элементы HTML

0 голосов
/ 15 марта 2019

Я собираю некоторую офлайновую техническую документацию, и поэтому написал несколько javascript для очень простой подсветки синтаксиса, и теперь для удобства я использую его для замены символов < и >, чтобы сэкономить время на избегайте их вручную.

Проблема в том, что это прекрасно работает для многих тегов html, за исключением блоков <html>, <head> и <body>.

HTML в блоках <code> присутствует в DOM, но JS, похоже, не находит их.

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

function stringReplace(str,from,to) {
  if (str) return str.replace(from,to)
}
var htmlChars = [
  ["<", "&lt;"],
  [">", "&gt;"]
];

function escapeHtmlChars(elementTagName, chars) {
  var codeSections = document.getElementsByTagName(elementTagName);
  for (var i = 0; i < codeSections.length; i++) {
    var codeContent = codeSections[i].innerHTML;
    for (var j = 0; j < chars.length; j++) {
      codeContent = stringReplace(codeContent, chars[j][0], chars[j][1])
      codeSections[i].innerHTML = codeContent;
    }
  }
}

window.addEventListener("load", function() {
  console.log(
    escapeHtmlChars("code", htmlChars)
  )  
});
<code class="code-snippet"><!doctype html>
    <html>
        <head>
            <style type="text/css"></style>
        </head>
    
        <body>
    
        </body>
    </html>
    </code>

Ответы [ 2 ]

2 голосов
/ 15 марта 2019

Я понимаю, что рассматриваемый HTML-код недействителен, но, учитывая, что он присутствует при просмотре исходного кода страницы, не должен ли он все еще быть найден?

Нет, потому что ваш JavaScriptне взаимодействует с исходным кодом.

Браузер читает исходный код.Из него создается DOM (который включает в себя lot правил восстановления после ошибок).Затем вы читаете innerHTML, который генерирует HTML из DOM.

Исходные данные недоступны, поскольку восстановление после ошибок уже применено.

теперь для удобства я использую их для замены символов <и>, чтобы сэкономить времячтобы вручную их убрать

Я предлагаю сгенерировать ваш HTML из файлов Markdown, чтобы сэкономить на этом усилия.Также можно установить макрос Найти и заменить в выделении в вашем редакторе.

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

Поскольку эти теги удаляются при визуализации, вы должны использовать AJAX, чтобы получить документы и преобразовать их при получении.

В качестве альтернативы: хотя XMP устарело, это все равно работает в моем браузере 

var html = document.querySelector("xmp").textContent
console.log(html)
document.querySelector("code").innerHTML = html.replace(/<(\/)?(\w+)/g,"<br/>&lt;$1$2")
xmp { display: none }
code { white-space: pre; }
<xmp class="code-snippet">
<!doctype html>
<html>
  <head>
    <style type="text/css"></style>
  </head>
  <body>
  </body>
</html>
</xmp>
<code></code>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...