Google Apps Script开发Gmail插件：IMMUTABLE_HTML重复插入HTML问题

这是Gmail对IMMUTABLE_HTML类型内容解析的一个已知小bug：当插入不含任何属性的<span>标签时，会触发重复渲染。要继续使用IMMUTABLE_HTML，可以通过预处理HTML的方式规避这个问题。

方案1：正则批量给无属性加空属性 #

用正则匹配所有无属性的<span>标签，给它们添加一个不影响显示的空class属性：

function sanitizeImmutableHtml(html) {
  // 匹配无属性的<span>开头标签，保留可能的空格
  return html.replace(/<span(\s*)>/g, '<span$1 class="">');
}

使用示例：

const rawHtml = '<span>HELLO</span><div>这是一段测试内容</div>';
const safeHtml = sanitizeImmutableHtml(rawHtml);

// 插入到卡片中
const htmlSection = CardService.newHtmlTextSection()
  .setHtml(safeHtml)
  .setContentType(CardService.ContentType.IMMUTABLE_HTML);

方案2：用DOMParser精准处理复杂HTML #

如果你的HTML包含嵌套标签、特殊结构，正则可能不够可靠，用DOMParser解析并修改所有无属性的<span>：

function fixImmutableHtml(html) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  
  doc.querySelectorAll('span').forEach(span => {
    // 检查span是否没有任何属性
    if (span.attributes.length === 0) {
      // 添加一个空的自定义属性，不影响显示
      span.setAttribute('data-placeholder', '');
    }
  });
  
  return doc.body.innerHTML;
}

这个方法能覆盖所有场景，包括嵌套在其他标签里的<span>，不会出现误匹配或遗漏。

补充说明 #

• 添加的空属性（比如空class或自定义data属性）不会影响邮件的显示效果，所有主流邮件客户端都会忽略这类无意义的空属性。
• 坚持使用IMMUTABLE_HTML可以确保插入的内容在Gmail中不可编辑，适合需要固定格式的插件内容，避免用户误修改。

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