使用JavaScript提取anchor文本并批量添加至title标签的技术求助

我现在遇上个麻烦事：需要用JavaScript把页面上所有<a>标签里的文本内容，自动加到对应的title属性里。但架不住页面里有几千个链接，而且这些链接全来自19个第三方插件——手动改根本不现实，直接改插件代码又怕以后插件更新出问题，得不偿失。

我已经在StackOverflow和Google上搜了快俩小时，找到的代码要么只对一部分链接生效，要么title内容总是乱的，有没有大佬能给个靠谱的解决方案？

给你两种实用的实现方案，按需选就行 #

1. 静态页面加载完成后一次性处理 #

如果你的插件都是在页面加载完成后就渲染好链接了，用这个方案最直接：

// 等页面所有资源都加载完再执行
window.addEventListener('load', () => {
  // 捞取页面上所有<a>标签
  const links = document.querySelectorAll('a');
  
  links.forEach(link => {
    // 提取标签里的纯文本，去掉前后多余空格
    const linkText = link.textContent.trim();
    // 只处理没有title或者title为空的链接，避免覆盖已有有效title
    if (!link.title || link.title.trim() === '') {
      link.title = linkText;
    }
  });
});

2. 处理动态生成的链接（适配异步加载的插件） #

要是有些插件是异步加载链接（比如滚动才加载、延迟渲染），上面的代码可能抓不到新生成的链接，这时候用DOM监听就稳了：

// 监听整个页面的DOM变化，也可以指定插件所在的父容器（更高效）
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 检查有没有新增的节点
    if (mutation.addedNodes.length) {
      mutation.addedNodes.forEach(node => {
        // 如果新增的就是<a>标签，直接处理
        if (node.tagName === 'A') {
          setLinkTitle(node);
        }
        // 如果是包含链接的父节点，批量处理里面的所有<a>
        else if (node.querySelectorAll) {
          node.querySelectorAll('a').forEach(setLinkTitle);
        }
      });
    }
  });
});

// 封装处理单个链接的函数，复用起来方便
function setLinkTitle(link) {
  const linkText = link.textContent.trim();
  if (!link.title || link.title.trim() === '') {
    link.title = linkText;
  }
}

// 启动监听，监听整个body的子节点变化
observer.observe(document.body, { childList: true, subtree: true });

// 先处理页面上已经存在的链接
document.querySelectorAll('a').forEach(setLinkTitle);

小提示 #

• 用textContent.trim()是为了避免title里出现多余的换行或者空格，看起来更干净
• 加了判断条件，不会覆盖已经设置好的有效title属性，只补全空的或者没设置的
• 第二种方案的MutationObserver可以自动捕获所有动态生成的链接，不管插件是啥时候渲染的，都能处理到

你可以把这段代码放到页面的<script>标签里，或者先在浏览器控制台测试效果，没问题了再加到你的自定义脚本里就行。

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