求可匹配JS与HTML文件源码内相对路径的正则表达式

// 前置建议：匹配前可先移除源码内的//单行注释、/* */块注释，进一步降低边缘场景误判
const relativePathRegex = /(?<quote>['"`])(?!text\/[a-zA-Z0-9.+-]+)(?<pathPrefix>(?:\.{1,2}\/|\/)?(?:[^'"`\\/:\n*?|<>]+\/)+)(?:[^'"`\\/:\n*?|<>]+\.[a-zA-Z0-9]+)\k<quote>/g

规则适配说明 #

• 基础匹配逻辑
  • 仅识别被单引号、双引号、反引号成对包裹的字符串
  • 强制要求路径包含至少1个/，且末尾带合法文件扩展名
  • 自动排除带:的内容，不会误匹配http://example.com/file.jpg这类带协议的绝对路径
• 误匹配排除逻辑
  • 通过前置负向预查，直接排除text/html、text/css这类text/开头的MIME字符串
  • 正则强制要求路径外层有成对同类型引号，自动过滤/some\-regex/这类无引号包裹的正则字面量、match(/\//)这类传入匹配方法的正则斜杠参数
• 捕获逻辑
  命名捕获组pathPrefix就是替换需要的目标内容，即引号后开始到路径最后一个/的部分，对应示例匹配结果：
  • 匹配'./path/to/file.jpg'时，捕获值为./path/to/
  • 匹配"/path/file.jpg"时，捕获值为/path/
  • 匹配`./sample.jpg`时，捕获值为./

替换使用示例 #

const source = `
// 以下路径会被正常匹配
const cover = './assets/img/cover.jpg'
const avatar = "/static/avatar.png"
const logo = `./logo.svg`
// 以下内容不会被误匹配
const contentType = 'text/html'
const parseReg = /path\-to\-file/
const matchRes = '/api/test'.match(/\//)
const cdnUrl = 'https://cdn.demo.com/bg.jpg'
`
// 示例：将所有相对路径替换为CDN前缀
const cdnPrefix = 'https://cdn.demo.com/assets/'
const replaced = source.replace(relativePathRegex, (match, _, prefix) => {
  const fileName = match.slice(prefix.length + 1, -1)
  return `${match[0]}${cdnPrefix}${fileName}${match[0]}`
})

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