在网页开发过程中，经常会出现需要批量修改页面内锚链接嵌入地址的需求，比如统一替换过期的资源链接、根据业务规则调整跳转地址等。这类操作的核心是通过DOM方法定位到符合条件的锚元素，再修改其href属性值。
原生JavaScript实现方式
原生JavaScript不需要依赖额外库，通过内置的DOM API就可以完成匹配锚链接的嵌入链接替换，适合轻量场景使用。
实现步骤
- 使用
document.querySelectorAll方法获取页面内所有的锚元素 - 遍历所有锚元素，根据预设的匹配规则筛选需要修改的目标锚
- 对符合条件的锚元素，修改其
href属性值为新的链接地址
代码示例
下面的示例会替换所有href中包含old-domain.com的锚链接，将域名替换为new-domain.com：
// 获取页面内所有锚元素
const allAnchors = document.querySelectorAll('a');
// 遍历锚元素
allAnchors.forEach(anchor => {
// 获取当前锚的href属性值
const currentHref = anchor.getAttribute('href');
// 判断是否符合匹配规则：href包含old-domain.com
if (currentHref && currentHref.includes('old-domain.com')) {
// 替换链接中的域名部分
const newHref = currentHref.replace('old-domain.com', 'new-domain.com');
// 设置新的href属性
anchor.setAttribute('href', newHref);
}
});jQuery实现方式
如果项目中已经引入了jQuery库，可以使用更简洁的选择器和链式操作来完成相同的需求，代码可读性更高。
实现思路
jQuery的属性选择器可以直接筛选href中包含指定字符串的锚元素，不需要手动遍历判断，减少代码量。
代码示例
同样实现替换包含old-domain.com的锚链接为new-domain.com的示例：
// 使用jQuery属性选择器筛选href包含old-domain.com的锚元素
$('a[href*="old-domain.com"]').each(function() {
// 获取当前锚的href值
const currentHref = $(this).attr('href');
// 替换域名部分
const newHref = currentHref.replace('old-domain.com', 'new-domain.com');
// 设置新的href值
$(this).attr('href', newHref);
});两种方式的对比与注意事项
| 实现方式 | 优势 | 适用场景 |
|---|---|---|
| 原生JavaScript | 无额外依赖，性能更优，兼容性好 | 项目未引入jQuery，轻量操作需求 |
| jQuery | 代码简洁，链式操作易读，选择器灵活 | 已引入jQuery的项目，复杂DOM操作场景 |
需要注意，如果锚链接的href是相对路径，匹配规则需要对应调整，避免误修改无关链接。另外修改链接后如果需要跟踪修改结果，可以在替换逻辑中添加日志输出，方便调试。
JavaScriptjQuery锚链接替换嵌入链接修改DOM操作修改时间：2026-06-03 01:42:24