如何从URL提取关键词替换HTML页面指定H1/H2标题？

嘿，这个需求其实挺常见的，我来给你一步步拆解清楚～

你需要的不是什么特殊“变量”，而是用JavaScript来解析URL里的utm_source参数值。浏览器原生就有好用的API能搞定这个，不用依赖第三方库。

具体实现步骤 #

1. 编写参数解析函数 #

先写一个简单的工具函数，用来从URL的查询字符串里提取指定参数：

function getUrlParam(paramName) {
  // 获取URL中?后面的查询字符串部分
  const urlParams = new URLSearchParams(window.location.search);
  // 返回目标参数的值
  return urlParams.get(paramName);
}

// 调用函数获取utm_source的值，比如从www.google.com/?utm_source=dogs里拿到"dogs"
const rawKeyword = getUrlParam('utm_source');
// 可选：如果需要把复数转单数（比如dogs→dog），可以做简单处理
const targetKeyword = rawKeyword ? rawKeyword.slice(0, -1) : '';

这里URLSearchParams是现代浏览器都支持的原生API，兼容性很好，不用操心复杂的字符串切割。

2. 替换指定的H1/H2标题 #

拿到关键词后，就可以定位页面里需要替换的标题元素，替换它们的文本内容。推荐用自定义属性来标记需要替换的标题，避免误改其他标题：

if (targetKeyword) {
  // 选中所有带data-replace-keyword属性的H1和H2
  const targetHeadings = document.querySelectorAll('h1[data-replace-keyword], h2[data-replace-keyword]');
  
  targetHeadings.forEach(heading => {
    // 直接替换成关键词
    heading.textContent = targetKeyword;
    
    // 如果你想保留部分原标题内容（比如原标题是"欢迎来到我们的{{keyword}}专区"），可以用模板替换：
    // heading.textContent = heading.textContent.replace('{{keyword}}', targetKeyword);
  });
}

对应的HTML里，给需要替换的标题加个属性就行：

<h1 data-replace-keyword>原标题内容</h1>
<h2 data-replace-keyword>另一个原标题</h2>

实现难度如何？ #

难度非常低，都是前端基础操作：URL解析、DOM元素选择和文本替换。只要你懂点基础的JavaScript和HTML，花个10分钟就能搞定。纯静态HTML页面直接把这段脚本放在</body>标签之前就行，完全不需要后端支持。

额外注意点 #

• 如果utm_source参数不存在，要留空判断，避免把标题改成空字符串，保持原标题不变。
• 如果参数值有大小写、特殊字符，可以加个处理，比如转成小写：targetKeyword = targetKeyword.toLowerCase();
• 如果需要更复杂的映射（比如不同参数对应不同关键词），可以扩展成对象映射，比如：

  const keywordMap = {
    'dogs': '可爱狗狗',
    'cats': '软萌猫咪'
  };
  const targetKeyword = keywordMap[rawKeyword] || rawKeyword;
  

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