如何使用 replace 方法重写 URL 路径？

Question

我的项目正在使用本地服务器代理。它通过使用正则表达式将api代理到我的本地文件路径。

以下是我的场景：

我的本地http请求为 '/api/bpm/fetch-action-progress-bar?bpm=123'，最终会找到名为'app/data/bpm/fetch-action-progress-bar.json'的json文件。

前提条件：只有以'/api'开头的路径应该被重写，而且api路径是不确定的。

实现一个'myRegex'来满足以下三个示例：

示例1

'/api/bpm/fetch-action-progress-bar?bpm=123'.replace(myRegex, 'app/data/$1.json')

需求：'app/data/bpm/fetch-action-progress-bar.json'

例子2

'/api/bpm/fetch-action-progress-bar'.replace(myRegex, 'app/data/$1.json')

需求：'app/data/bpm/fetch-action-progress-bar.json'

示例 3

'/api/yt/order/export?id=1212'.replace(myRegex, 'app/data/$1.json')

需求: 'app/data/yt/order/export.json'

我只能使用replace方法，帮我实现一个'myRegex'来解决这个问题。我的难点在于查询参数可能不存在。

- Jon003

---

考虑使用新的URL。 - Always Helping

我做不到。因为开发cli只暴露了正则表达式的接口。 - Jon003

Answer 1

/.*?(?!.*\/)([\w\-]+)[^?]?.*/

使查询参数“?”变为可选项。

我在jsfiddle.net上进行了检查。

console.log('/api/bpm/fetch-action-progress-bar?bpm=123'.replace(/.*?(?!.*\/)([\w\-]+)[^?]?.*/, 'app/data/$1.json'))  

console.log('/api/bpm/fetch-action-progress-bar'.replace(/.*?(?!.*\/)([\w\-]+)[^?]?.*/, 'app/data/$1.json')) 

这里提供演示和说明： https://regex101.com/r/HBvG3K/10 regex101.com/r/HBvG3K/11

根据聊天中的请求更新。

\/api\/([\w\-\/]+).*

- rootkonda

---

它不满足示例2。 - Jon003

我也在检查另一个例子。 - rootkonda

console.log('/api/bpm/fetch-action-progress-bar?bpm=123'.replace(/.*?(?!./)([\w-]+)[^?]?./, 'app/data/$1.json'))console.log('/api/bpm/fetch-action-progress-bar'.replace(/.*?(?!./)([\w-]+)[^?]?./, 'app/data/$1.json'))两者都可以正常工作。我在jsfiddle.net上测试过了。您也可以尝试并确认一下，这样我就可以更新答案。 - rootkonda

非常感谢。你能给我解释一下正则表达式吗？我不理解 '.*?(?!.*/)([\w-]+)'。 - Jon003

顺便说一下，我只想重写以“/api”开头的路径。 - Jon003

Answer 2

由于此任务不需要考虑全局或多行标志的方法，因此像(/\/api\/([^?#]+)[?#]*.*/)这样的简单正则表达式已经足够可靠...请参见下面符合OP要求的测试...

// see also: [https://regex101.com/r/3mab2d/1]

const regXReplacePath = (/\/api\/([^?#]+)[?#]*.*/);


// example 1
// :: '/api/bpm/fetch-action-progress-bar?bpm=123'
// => 'app/data/bpm/fetch-action-progress-bar.json'

console.log(
  '/api/bpm/fetch-action-progress-bar?bpm=123'.replace(

    regXReplacePath,
    'app/data/$1.json'

  ) === 'app/data/bpm/fetch-action-progress-bar.json'
);


// example 2
// :: '/api/bpm/fetch-action-progress-bar'
// => 'app/data/bpm/fetch-action-progress-bar.json'

console.log(
  '/api/bpm/fetch-action-progress-bar'.replace(

    regXReplacePath,
    'app/data/$1.json'

  ) === 'app/data/bpm/fetch-action-progress-bar.json'
);


// example 3
// :: '/api/yt/order/export?id=1212'
// => 'app/data/bpm/fetch-action-progress-bar.json'

console.log(
  '/api/yt/order/export?id=1212'.replace(

    regXReplacePath,
    'app/data/$1.json'

  ) === 'app/data/yt/order/export.json'
);

.as-console-wrapper { min-height: 100%!important; top: 0; }

- Peter Seliger