如何在JavaScript用户脚本中提取HTML href元素的URL片段？

核心问题修正：提取<a>标签的href属性而非文本 #

你之前获取的是标签文本，要拿到URL片段，需要用getAttribute('href')获取链接地址，再从地址中提取故事ID。

具体实现步骤 #

1. 获取作品链接的href属性
   针对AO3的作品链接（格式为/works/[故事ID]/...），先定位到对应的<a>标签，再获取其href属性：

   const href = linkElement.getAttribute('href');
   

2. 从href中提取故事ID
   AO3的故事ID是/works/后的数字串，有两种可靠提取方式：

   • 方式一：用字符串分割（适合固定URL结构）

     // 分割后数组第2位就是ID（比如"/works/12345"分割后是["", "works", "12345"]）
     const storyId = href.split('/')[2];
     

   • 方式二：用正则匹配（兼容性更强，适配带额外路径的URL）

     const matchResult = href.match(/\/works\/(\d+)/);
     const storyId = matchResult ? matchResult[1] : null; // 匹配到则取ID，否则返回null
     

3. 结合黑名单过滤隐藏作品
   把提取到的ID和你的黑名单对比，找到对应的作品父容器并隐藏：

   // 示例黑名单
   const blockedStoryIds = ['12345', '67890'];
   
   // 遍历页面所有作品链接
   document.querySelectorAll('a[href^="/works/"]').forEach(link => {
     const href = link.getAttribute('href');
     const matchResult = href.match(/\/works\/(\d+)/);
     if (!matchResult) return;
   
     const storyId = matchResult[1];
     if (blockedStoryIds.includes(storyId)) {
       // 找到作品的父容器（AO3浏览页的作品条目通常是.blurb类）
       const workItem = link.closest('.blurb');
       if (workItem) {
         workItem.style.display = 'none';
         // 也可以用添加类的方式，方便自定义隐藏样式：
         // workItem.classList.add('blocked-work');
       }
     }
   });
   

额外提示 #

• 如果页面是动态加载内容（比如滚动加载更多作品），需要用MutationObserver监听页面DOM变化，在新内容加载后重新执行过滤逻辑。
• 确认作品父容器的选择器：AO3不同页面的作品容器类名可能不同，比如作品列表页是.blurb，个人收藏页可能是.work，根据实际页面调整closest()的参数。

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