Javascript 找不到某些 html 元素

我正在整理一些离线技术文档，因此为非常基本的语法突出显示了一些JavaScript，现在为了方便起见，我正在使用它来替换<和>字符来保存我有时间必须手动逃脱它们。

问题在于，除了<html>，<head>和<body>块外，它非常适合许多HTML标签。

DOM中存在<code>块中的HTML，但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>

我了解有问题的HTML是无效的，但是当我查看页面源时它存在，是否仍然可以找到它？

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

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

由于已经应用了错误恢复，因此无法使用原始数据。

现在为方便起见，我正在使用它来替换＆lt;和>字符节省我的时间必须手动逃脱

我建议从Markdown文件生成您的HTML，以节省此处的工作。或者，设置A 查找＆amp;替换编辑器中的选择宏。

，由于这些标签在渲染时被剥离，因此您应该使用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>

相关内容

最新更新

热门标签：