JS Regex,如何仅替换捕获的组？

Question

好的问题很简单.我正在寻找像这样的字符串:

name="some_text_0_some_text"

我在上面的字符串之前和之后都有HTML代码.

现在我想用以下内容替换0:!NEW_ID!

所以我做了一个简单的正则表达式:

.*name="\w+(\d+)\w+".*

但我不知道如何专门替换捕获的块.

有没有办法用其他字符串替换像($ 1)这样的捕获结果？

结果将是:

name="some_text_!NEW_ID!_some_text"

谢谢你的帮助 :)

Answer 1

解决方案是为前后文本添加捕获:

str.replace(/(.*name="\w+)(\d+)(\w+".*)/, "$1!NEW_ID!$3")

Answer 2

既然Java语言已经落后了（从ES2018开始），在较新的环境中，您可以完全避免在此类情况下进行分组。相反，向后寻找要捕获的组之前发生的事情，然后向后进行查找，然后用just 代替!NEW_ID!：

const str = 'name="some_text_0_some_text"';
console.log(
  str.replace(/(?<=name="\w+)\d+(?=\w+")/, '!NEW_ID!')
);

使用这种方法，完全匹配只是需要替换的部分。

• (?<=name="\w+)-Lookbehind for name"，后跟单词字符（幸运的是，lookbehinds不必在Javascript中固定宽度！）
• \d+ -匹配一个或多个数字-模式的唯一部分不在环视范围内，字符串的唯一部分将出现在结果匹配项中
• (?=\w+")-前瞻单词字符，后跟" `

请记住，向后看是很新的。它可以在V8的现代版本（包括Chrome，Opera和Node）中运行，但在大多数其他环境中（至少目前还不能）使用。因此，尽管您可以在Node中以及在您自己的浏览器中可靠地使用lookbehind（如果在现代版本的V8上运行），但是随机客户端（例如在公共网站上）仍未充分支持它。

Answer 3

要知道，如果您需要转换和操作捕获组，可以使用转换器函数作为第二个参数......

应用程序编程接口

replace(
    regex,
    (matched, capture1, capture2, /*...,*/ capture_n, index, input_str) => transformed(/*...*/)
)

replace(
    regex: Regex,
    transformer: (matched: string, capture1: string, capture2: string, /*...,*/ capture_n: string, index: number, input_str: string) => string
) => string

捕获的数量与您在正则表达式中使用的数量有关。index是input_str最后的。

请参阅下面的示例及其输出，以更好地了解每个示例的含义。

文档参考：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#making_a_generic_replacer

例子：

// To uses example
const propsArgs = args.map((arg) =>
  arg.slice(2).replace(/-(.)/g, (matched, captureGroup, index, input) => {
    return captureGroup.toUpperCase();
  })
);


// To uses example multiple captures groups
const propsArgs = args.map((arg) =>
  arg
    .slice(2)
    .replace(/-(.)(.)/g, (matched, capture1, capture2, index, input) => {
      return capture2.toUpperCase();
    })
);

// To uses example multiple captures groups args destructuring version
// args[0] matched, args[1] capture 1, ....., args[n] capture n, args[n+1] index, args[n+2] total string to replace.
const propsArgs = args.map((arg) =>
  arg.slice(2).replace(/-(.)(.)/g, (...args) => {
    return args[2].toUpperCase(); // capture 2
  })
);

// example for understanding
const propsArgs = args.map((arg) =>
  arg.slice(2).replace(/-(.)/g, (...args) => {
    console.log(args); // [ '-f', 'f', 6, 'config-file' ]
    return args[1].toUpperCase();
  })
);

// multiple capture groups and the args order
/**
 * matched string, then all the captures arg after another, then index, then total input string to replace
 */
const propsArgs = args.map((arg) =>
  arg
    .slice(2)
    .replace(
      /-(.)(.)(.)/g,
      (matched, capture1, capture2, capture3, index, input) => {
        // [ '-wat', 'w', 'a', 't', 3, 'log-watch-compilation' ]
        return capture1.toUpperCase();
      }
    )
);

上面的核心示例是将命令行参数转换为 javascript 驼峰式大小写等效项。

对此进行改造：

[
  '--filename',
  '--config-file',
  '--env-name',
  '--no-swcrc',
  '--ignore',
  '--only',
  '--watch',
  '--quiet',
  '--source-maps',
  '--source-map-target',
  '--source-file-name',
  '--source-root',
  '--out-file',
  '--out-dir',
  '--copy-files',
  '--include-dotfiles',
  '--config',
  '--sync',
  '--log-watch-compilation',
  '--extensions'
]

到

[
  'filename',            'configFile',
  'envName',             'noSwcrc',
  'ignore',              'only',
  'watch',               'quiet',
  'sourceMaps',          'sourceMapTarget',
  'sourceFileName',      'sourceRoot',
  'outFile',             'outDir',
  'copyFiles',           'includeDotfiles',
  'config',              'sync',
  'logWatchCompilation', 'extensions'
]

Answer 4

对马修的答案的一点改进可能是前瞻而不是最后一个捕获组：

.replace(/(\w+)(\d+)(?=\w+)/, "$1!NEW_ID!");

或者你可以按小数点拆分并与你的新 id 连接，如下所示：

.split(/\d+/).join("!NEW_ID!");

示例/基准：https: //codepen.io/jogai/full/oyNXBX