正则表达式:一次匹配和替换两个组

Question

如何查找字符串中的大写和小写字符组并通过以下方式替换它们：

• 为大写组添加 HTML 标记：<span class="upper_group">FOO</span>
• 为小写组添加 HTML 标记并转换为大写：<span class="lower_group">BAR</span>

我在下面尝试过这个，但无法轻松地将下组转换为大写：

let sentence = "NOCH KEt SKUIZh";
let newSentence = sentence.replace(/([a-z]+)/g, '<span class="bar">$1</span>').replace(/([A-Z'.]+)/g, "<span class='foo'>$1</span>");

预期产出：

<span class="foo">NOCH</span> <span class="foo">KE</span><span class="bar">t</span> <span class="foo">SKUIZ</span><span class="bar">h</span>

Answer 1

let sentence = "NOCH KEt SKUIZh";
let newSentence = sentence.replace(/([a-z]+)|([A-Z'.]+)/g, (a,b) => b ? `<span class="adlavaret2">${a.toUpperCase()}</span>` : `<span class="adlavaret1">${a}</span>`);
console.log(newSentence);

Answer 2

您可以考虑以下代码：

var s = "NOCH KEt SKUIZh";
var r = s.replace(/([a-z]+)|([A-Z]+)/g,
(m, g1, g2) => '<span class="' + (g1 != undefined ? 'lower">' + g1  : 'upper">' + g2) + '</span>');
console.log(r);
//=> '<span class="upper">NOCH</span> <span class="upper">KE</span><span class="lower">t</span> <span class="upper">SKUIZ</span><span class="lower">h</span>'

正则表达式+拉姆达详细信息：

• ([a-z]+)：匹配第一组中的 1+ 小写字母
• |： 或
• ([A-Z]+)： 匹配第 2 组中的 1+ 大写字母
• (m, g1, g2)：使 lambda 表达式m(完全匹配)和gN(第 N 个捕获组)可用
• 当g1不为 null 时，请使用类lower否则使用类upper

Answer 3

以下假设您的预期输出确实应为：

<span class="foo">NOCH</span> <span class="foo">KE</span><span class="bar">T</span> <span class="foo">SKUIZ</span><span class="bar">H</span>

您可以使用替换器函数。例如：

let sentence = "NOCH KEt SKUIZh";
let replacer = (_, g1, g2) =>
`<span class="${ g1 ? `foo">${g1}` : `bar">${g2.toUpperCase()}` }</span>`;
let newSentence = sentence.replace(/([A-Z]+)|([a-z]+)/g, replacer);
console.log(newSentence);

g1是([A-Z]+)捕获的字符串，g2是([a-z]+)捕获的字符串。

Answer 4

function getUpperLowerSubstitute(match, upper, lower) {
return (
(upper && `<span class="upper_group">${ upper }</span>`) ||
(lower && `<span class="lower_group">${ lower }</span>`) ||
''
);
}
const regXUpperLower = /(?<upper>[[A-Z]+)|(?<lower>[[a-z]+)/g
console.log(
'"NOCH KEt SKUIZh".replace(regXUpperLower, getUpperLowerSubstitute) ...',
"NOCH KEt SKUIZh".replace(regXUpperLower, getUpperLowerSubstitute)
);

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