如何动态修改含大于1数字的.goods__variants类div：将color改colors

我有许多带有.goods__variants类的div，内部文本各不相同。当内容为“1 color”时格式正确，但如果是“15 color”则格式有误。我需要修改所有内部包含大于1的数字的div，将其中的“color”替换为“colors”。

我尝试过如下代码，但不想为每个数字都编写对应代码行，请问如何实现对所有数字的动态处理？非常感谢！

代码：

$('.goods__variants').each(function() {
   var text = $(this).text();
   text.indexOf("4 Farbe") >= 0 ? text = text.replace('4 Color', '4 Colors') : null;
   $(this).text(text);
});

直接用正则表达式动态匹配数字并判断，不用逐个写数字判断：

$('.goods__variants').each(function() {
  const $this = $(this);
  let text = $this.text();
  // 匹配数字+空格+color的组合，捕获数字部分
  text = text.replace(/(\d+)\s+color/gi, function(match, num) {
    // 数字大于1时替换为复数形式，否则保留原内容
    return parseInt(num, 10) > 1 ? `${num} colors` : match;
  });
  $this.text(text);
});

代码说明 #

• (\d+)：捕获一个或多个连续数字，作为参数传给回调函数
• \s+：匹配一个或多个空格，兼容不同的文本格式
• gi：g表示全局匹配（处理同一文本里多个符合条件的内容），i表示不区分大小写（能匹配Color/COLOR等写法）
• 回调函数里把捕获的数字转成整数，判断是否大于1，是就替换成数字 + colors，否则保留原匹配内容

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