如何用JavaScript将含pluginfile.php的链接转为Bootstrap按钮

完整实现代码 #

// 选中所有包含"pluginfile.php"的链接
const downloadLinks = document.querySelectorAll('a[href*="pluginfile.php"]');

// 遍历每个链接，修改为目标按钮样式
downloadLinks.forEach(link => {
  // 设置新窗口打开属性
  link.setAttribute('target', '_blank');
  // 添加Bootstrap按钮样式类
  link.classList.add('btn', 'btn-outline-primary');
  // 替换内容为Font Awesome下载图标（如需保留原文本，见下方说明）
  link.innerHTML = '<i class="fa fa-download"></i>';
});

关键步骤说明 #

• 选中目标链接：使用document.querySelectorAll('a[href*="pluginfile.php"]')精准匹配所有包含pluginfile.php的链接。
• 设置窗口打开方式：通过setAttribute添加target="_blank"，让链接在新标签页打开。
• 添加Bootstrap样式：用classList.add避免覆盖原链接可能存在的其他类（如果不需要保留原类，直接用link.className = 'btn btn-outline-primary'即可）。
• 替换为图标：修改innerHTML为Font Awesome的下载图标标签，完成样式转换。

可选：保留原链接文本 #

如果需要保留原链接的文字内容，同时添加图标，将innerHTML的代码替换为：

link.innerHTML = `<i class="fa fa-download"></i> ${link.textContent}`;

注意事项 #

• 确保页面已正确引入Bootstrap CSS和Font Awesome CSS，否则按钮样式和图标无法正常显示。
• 如果表格是动态加载（如通过AJAX获取），需在表格渲染完成后再执行这段代码，或使用事件委托处理后续新增的链接。

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