如何从字符串匹配URL添加anchor标签，同时排除图片与文档类URL？

你可以在匹配到URL后增加后缀校验逻辑，先定义需要排除的图片、文档类后缀名单，匹配到URL后先校验是否命中排除后缀，未命中才添加<a>标签。

修改后代码 #

function urlParsing(text) {
  // 定义需要排除的资源后缀，可根据业务需求增删
  const excludeSuffix = new Set(['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'zip', 'rar', '7z'])
  const urlRegex = /(https?:\/\/[^\s]+)/g;
  return text.replace(urlRegex, function(url) {
    // 先去除URL后缀后的query参数，再提取后缀转为小写匹配
    const suffix = url.split('?')[0].split('.').pop().toLowerCase();
    // 不在排除列表内才添加a标签
    return excludeSuffix.has(suffix) ? url : `<a href="${url}">${url}</a>`;
  })
}

// 测试用例
console.log(urlParsing('Hello john https://stackoverflow.com'));
// 输出：Hello john <a href="https://stackoverflow.com">https://stackoverflow.com</a>
console.log(urlParsing('Hello john https://picsum.photos/200/300.jpg'));
// 输出：Hello john https://picsum.photos/200/300.jpg

方案说明 #

• 用Set存储排除后缀，匹配效率更高，你可以根据自己的业务需要自由增减后缀名单
• 提取后缀时统一转小写，避免因为后缀大小写不一致（比如JPG、Pdf）导致匹配失效
• 内置了URL带query参数的适配逻辑，比如xxx.jpg?width=200这类带参数的图片资源也能正确识别排除

内容的提问来源于stack exchange，提问作者sooraj s pillai