以编程方式替换 html post build 中脚本标记中的变量值答案

【问题标题】：Programmatically replace a variable value in script tag in html post build以编程方式替换 html post build 中脚本标记中的变量值
【发布时间】：2021-12-01 12:59:28
【问题描述】：

构建 Angular 应用程序后，我的要求是创建 index.html 的副本并更改其中的变量。如何以编程方式完成。一种选择ofcourse是做一个字符串替换，但有没有通过解析html的任何其他方式。例如下面是模式“内部”的 index.html，我想创建它的另一个副本说“public.html”并将模式替换为view = 'PUBLIC' post build。

<!doctype html>
<html lang="en">

<head>
  <base href="./">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script type="application/javascript">
    var global = window;
    window.__VIEW__ = 'INTERNAL';
  </script>
</head>

<body>
  <app-root role="main">
  </app-root>
</body>

</html>

【问题讨论】：

标签： angular build html-parsing

【解决方案1】：

我在 HTML 模板文件上使用 mustache.js，或者在本例中是嵌入脚本。

function renderHello() {
  var template = document.getElementById('template').innerHTML;
  var rendered = Mustache.render(template, {
    name: 'Luke'
  });
  document.getElementById('target').innerHTML = rendered;
}

<html>
<body onload="renderHello()">
  <div id="target">Loading...</div>
  <script id="template" type="x-tmpl-mustache">
    Hello {{ name }}!
  </script>

  <script src="https://unpkg.com/mustache@latest"></script>
</body>

</html>

【讨论】：