HTML 中的新标签和解析器答案

【问题标题】：New tag and parser in HTMLHTML 中的新标签和解析器
【发布时间】：2019-05-20 10:09:46
【问题描述】：

我已经为客户端脚本设计了一种新的编程语言。我熟悉如何构建一种语言，以及其中的大部分工作。我为一个漫长的项目做好了准备，但是对于如何将它实现到 HTML 文件中存在一些问题。我想在 HTML 中实现类似

以下是我的一些问题，假设我希望在标签之间使用我的语言：

如何防止浏览器的 HTML 解析器将标记中的内容误解为 HTML 代码？我所看到的所有以我的语言编写的代码都会在网站上显示为纯文本。
如何在 JS 文件中实现我的解析器？我不是在问如何解析自定义语言，只是在问它放在哪里。第一个链接提到了在使用标记时调用的 createdCallback() 函数。假设以后没有人使用 JavaScript 添加标记（这对于这种语言来说毫无意义），应该在使用自定义标记时调用回调。
要解析我的语言，我应该访问自定义标签的 innerHTML 属性吗？我不知道通过解析时间标记是否甚至具有该属性，或者我是否必须添加该属性，因为我不熟悉它的那部分是如何工作的。

感谢您忍受我的愚蠢问题。我喜欢深入研究这些东西，即使我在这部分脚本方面还很陌生。基本上，这就是我希望代码的样子：

<!DOCTYPE html>
<html>
    <head><script src="my-lang.js"></script></head>
    <my-language>
        //do some stuff in my language, like DOM editing. 
        //Just a replacement for JavaScript basically that doesn't serve much purpose.
    </my-language>
</html>

任何建议将不胜感激。提前致谢！

【问题讨论】：

最好的方法是使用带有自定义语言定义的脚本元素
基本上，handlerbars、backbone 和其他库使用脚本标签来保存模板。
想解释一下？我正在寻找脚本元素的功能，所以如果这是一个选项，我很乐意听到更多关于它的信息。也许留下一个答案，描述你在说什么。
类似，我认为它在语义上相当不错，因为这就是脚本标签的用途。
正如新答案所说，新的脚本类型将是要走的路。但我会使用“text/myLanguage”之类的东西，因为这是一种有效的 mime 类型

标签： javascript python html html-parsing

【解决方案1】：

我建议不要在 HTML 中使用新的非标准标签，而是考虑使用<script> 标签。尽管<script> 标记经常用于 Javascript，但并非总是如此。例如，服务器发送数据以供客户端 JS 解析的一种可能技术是将 JSON 放在像 <script type="application/json">{"foo":"bar"}</script> 这样的标签中。类型不是type="javascript" 的脚本不会被尝试解析为 Javascript，但标签内的数据可以使用 Javascript检索。您可以通过选择标签然后访问其textContent 属性来做到这一点。（innerHTML 属性可能仅适用于您有意检索 HTML 标记 - 否则，可能最好使用 textContent）

您可以使用几乎相同的技术，但不是 JSON.parseing <script> 标记的内容，而是通过您的解析器发送它。

例如：

const tag = document.querySelector('script[type="myNewLanguage"]');
const scriptText = tag.textContent;

// use your parser to parse scriptText
scriptText.split('\n').forEach(line => {
  console.log(line);
});

<script type="myNewLanguage">foo
bar
baz</script>

【讨论】：

哇！感谢您的快速回复。那么顶部代码 sn-p 将是一个单独的文件吗？我试图让尽可能多的内部工作远离 HTML 文件，并使任何使用 HTML 编码的人都可以轻松实现。出于好奇，我是否可以使用上面引用的链接来定义一个基本上归结为您放置的标签的标签？谢谢
如果您想从 HTML 中删除自定义语言，您必须发出网络请求才能访问代码，这意味着在代码执行之前会有更多延迟。这是一个非常好的选择，它只是你必须考虑的权衡。我不建议在您的链接中使用自定义元素，因为它们的支持太参差不齐 - 它是一项技术太新，无法被许多旧浏览器支持。看起来自定义元素是用来包含 HTML 标记的，这不是你在做的。
太好了，感谢您的建议。我肯定会实施这一点。此外，我计划使用与服务器端语言相同的语法，并内置对 Node.js 的 Express 和 Python 的 Flask 的支持。当在 Node.js 中使用 Express 或在 Python 中使用 Flask 时，有没有办法在动态提供文件时将 <script src="my-lang.js"> 插入到它们的 HTML 中？这种方式几乎就像我的语言在 HTML 中被自动支持。不知道这是否应该是一个单独的问题，但我想我会问你。
我不知道 Flask/Express，但我很确定非 JavaScript、非图像资源不能单独从 HTML 中自动加载（比如 src 属性） - 很确定 Javascript 网络请求是唯一可以完成的方法。（除非您希望链接到一个 包含您的自定义代码 的 Javascript 文件，例如包含 window.myCustomScript = `<lots of code in your custom language>`; 的脚本 - 但这很奇怪）