如何在AMP页面中使用JavaScript实现文本替换？

修正amp-script用法（规避innerHTML限制） #

amp-script禁止直接使用innerHTML这类存在安全风险的DOM操作，改用递归遍历文本节点的方式替换内容，完全符合AMP安全规范：

<amp-script layout="container" script="text-replace-script"></amp-script>
<script id="text-replace-script" type="text/plain" target="amp-script">
  function replaceText(node, searchPattern, replacement) {
    if (node.nodeType === Node.TEXT_NODE) {
      node.textContent = node.textContent.replace(searchPattern, replacement);
    } else if (node.nodeType === Node.ELEMENT_NODE && node.tagName !== 'SCRIPT') {
      node.childNodes.forEach(child => replaceText(child, searchPattern, replacement));
    }
  }
  // 执行全局文本替换
  replaceText(document.body, /hello/g, 'hi');
</script>

• 核心逻辑：仅遍历并修改页面中的文本节点，不改动元素的HTML结构，从根源上规避AMP的安全限制。

修正amp-bind用法（解决校验报错） #

之前用amp-bind触发Google Console报错，通常是因为违反了AMP的状态绑定规则，正确的局部文本替换方式如下：

<!-- 定义AMP状态容器 -->
<amp-state id="contentState">
  <script type="application/json">
    {
      "greeting": "hello world"
    }
  </script>
</amp-state>

<!-- 绑定动态文本 -->
<p [text]="contentState.greeting.replace(/hello/g, 'hi')">{{contentState.greeting}}</p>

<!-- 可选：手动触发文本更新的交互按钮 -->
<button on="tap:AMP.setState({contentState: {greeting: 'hello everyone'}})">更新问候语</button>

• 注意：amp-bind更适合局部、状态驱动的文本变更，若需全局批量替换，建议优先使用amp-script方案，避免因绑定表达式过于复杂触发校验失败。

服务端预替换（零风险兼容方案） #

如果前端方案仍有校验顾虑，最稳妥的方式是在服务端渲染页面时直接完成文本替换，完全符合AMP的静态页面要求，不会触发任何Google Console校验错误。

内容的提问来源于stack exchange，提问作者bricoda