如何使用jQuery为所有.tel类链接添加onclick事件

下面分享几个实用的实现方法：

方法1：原生JavaScript（无依赖） #

直接用原生JS就能搞定，不用额外引入库。把这段代码放到页面的<script>标签里，或者外部JS文件中：

// 等页面DOM加载完成再执行
document.addEventListener('DOMContentLoaded', () => {
  // 选中所有带tel类的a标签
  const telLinks = document.querySelectorAll('a.tel');
  
  telLinks.forEach(link => {
    // 获取当前链接的href地址
    const linkUrl = link.getAttribute('href');
    // 给链接添加onclick事件
    link.setAttribute('onclick', `return gtag_report_conversion('${linkUrl}');`);
  });
});

这段代码会自动遍历所有符合条件的链接，把各自的href值填入gtag_report_conversion的参数里，完全匹配你的需求。

方法2：jQuery实现（适合已用jQuery的项目） #

如果你的项目已经引入了jQuery，代码可以更简洁：

$(document).ready(function() {
  $('a.tel').each(function() {
    const url = $(this).attr('href');
    $(this).attr('onclick', `return gtag_report_conversion('${url}');`);
  });
});

逻辑和原生JS一致，只是用jQuery的选择器和方法简化了代码。

方法3：静态页面批量正则替换（适合纯静态HTML文件） #

如果是本地的静态HTML文件，不想加JS代码，可以用文本编辑器（比如VS Code、Sublime）的正则批量替换功能：

1. 打开查找替换面板，开启「正则表达式」模式
2. 查找内容：<a class='tel' href="([^"]+)"
3. 替换内容：<a class='tel' onclick="return gtag_report_conversion('$1');" href="$1"

注意：如果你的HTML里class属性用的是双引号（class="tel"），记得把查找内容里的单引号改成双引号。

这样一次性就能把所有符合格式的链接替换成目标样式。

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