JS用锚标签替换文本链接 - Javascript

在开发网站或者应用时，常常需要添加链接。一般情况下，我们使用文本链接或者直接使用超链接标签 <a> 进行添加。

然而，在需要批量替换文本链接时，一个一个手动修改就十分麻烦。那么，我们可以使用 Javascript，通过自动添加锚标签的方式来替换文本链接。

实现思路

为了实现这个功能，我们需要完成以下几个步骤：

1. 获取包含文本链接的页面元素；
2. 遍历页面元素，将文本链接替换成锚标签；

实现代码

// 获取包含文本链接的页面元素
const targetEles = document.querySelectorAll('[href]');

// 遍历页面元素
targetEles.forEach(ele => {
  // 创建锚标签
  const anchorEle = document.createElement('a');
  // 获取文本链接
  const hrefVal = ele.getAttribute('href');
  // 获取文本内容
  const textVal = ele.innerHTML;
  // 设置锚标签的href和text属性
  anchorEle.href = hrefVal;
  anchorEle.text = textVal;
  // 替换文本链接
  ele.replaceWith(anchorEle);
});

调用方式

在 HTML 页面中引用 Javascript 文件，将以上代码放入 <script> 标签中，即可调用该函数。

<script src="path/to/your/js"></script>

注意事项

• 该方式仅适用于替换带有 href 属性的文本链接，如果页面中存在不带有 href 属性的链接，则需要根据情况做出调整。

• 该方式会修改原页面的链接结构，因此在使用之前需要仔细考虑。

• 为了避免因错误修改造成的不良后果，建议在使用之前先备份原页面。