如何在GTM中从HTML提取姓名、街道、邮编及城市信息

方案1：针对现有文本格式用自定义JS变量提取 #

假设你修改后的HTML地址部分类似这种结构（文本格式为街道, 邮编 城市）：

<div class="xlwcty_Mview">
  <div class="customer-name">Vincent Destil</div>
  <div class="customer-address">123 Rue Example, 1000 Bruxelles</div>
</div>

在GTM里新建自定义JavaScript变量，用以下代码拆分邮编和城市：

function() {
  // 替换成你实际的地址元素选择器
  var addressEl = document.querySelector('.customer-address');
  if (!addressEl) return null;
  
  var addressText = addressEl.textContent.trim();
  // 先按逗号拆分地址主体和邮编城市部分
  var parts = addressText.split(',');
  if (parts.length < 2) return null;
  
  var zipCityStr = parts[1].trim();
  // 用正则匹配邮编（假设是连续非空格字符开头，后续是城市名）
  var match = zipCityStr.match(/^(\S+)\s+(.*)$/);
  if (match) {
    return {
      邮编: match[1],
      城市: match[2]
    };
  }
  
  // 如果地址没有逗号，直接匹配末尾的邮编+城市
  match = addressText.match(/(\S+)\s+(.*)$/);
  return match ? {邮编: match[1], 城市: match[2]} : null;
}

• 使用时，在标签里可以通过{{你的变量名}}.邮编和{{你的变量名}}.城市分别调用对应值。
• 如果你的邮编包含字母（比如欧洲部分地区），把正则里的\S+改成符合当地邮编规则的表达式即可，比如比利时邮编是4位数字，就用\d{4}。

方案2：修改Woocommerce代码输出更友好的结构 #

如果还能调整Woocommerce的代码，直接把邮编和城市拆成独立的DOM元素是最稳定的方式，比如：

<div class="xlwcty_Mview">
  <div class="customer-name">Vincent Destil</div>
  <div class="customer-street">123 Rue Example</div>
  <div class="customer-zip">1000</div>
  <div class="customer-city">Bruxelles</div>
</div>

这样直接用GTM的DOM元素变量，分别选择对应的class就能提取，完全不用写JS，兼容性和稳定性都更高。

测试提示 #

在GTM预览模式下，触发页面后查看变量面板，确认自定义JS变量是否正确返回邮编和城市值。如果遇到特殊格式的地址，调整正则表达式即可适配。

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