Question

我正在整理一些脱机技术文档，因此已经写了一些JavaScript来突出显示基本语法，现在为了方便起见，我用它来替换{{1}}和<字符以进行保存我需要手动逃脱它们。

问题在于，这对于许多html标记非常有用，除了>，<html>和<head>块之外。

<body>块中的HTML存在于DOM中，但是JS似乎找不到它们。

我了解所讨论的HTML无效，但鉴于在查看页面源代码时存在该HTML，难道还找不到吗？

<code>

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)
  )  
});

Answer 1

我了解所讨论的HTML无效，但鉴于在查看页面源代码时存在该HTML，难道还找不到吗？

否，因为您的JavaScript没有与源代码进行交互。

浏览器读取源代码。它从中构造一个DOM（涉及很多错误恢复规则）。然后，您阅读innerHTML，它从DOM生成HTML。

原始数据不可用，因为已经应用了错误恢复。

为了方便起见，我现在使用它来替换<和>字符，以节省我不得不手动转义它们的时间

我建议从Markdown文件生成HTML，以节省工作量。或者，在编辑器中设置一个查找并替换选择项宏。

Answer 2

由于这些标记在呈现时会被剥离，因此您应该使用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>

JavaScript找不到某些html元素

2 个答案: