使用 javascript .replace 正则表达式将递增数字添加到字符串

Posted 2023-02-24

【中文标题】使用 javascript .replace 正则表达式将递增数字添加到字符串

【英文标题】：Add incrementing numbers to string use javascript .replace regex

【发布时间】：2012-12-20 12:28:51

【问题描述】：

我有这个字符串，我试图通过添加一个 _# 来增加每个单词/属性，其中 # 是 左侧的递增数字。

 str = 'ViewImageBackgroundImage: Image.png;Position: 0, 0;Width: 320;Height: 480;ButtonBackgroundImage: ButtonTop.png;Position: 61, 83;Width: 217;Height: 58;Button_2BackgroundImage: ButtonBottom.png;Position: 21, 303;Width: 217;Height: 58;'

过去我使用过这个正则表达式，但它不起作用，我不知道为什么。

var i = ;
str = str.replace(/(\S+):/g, function (m, p1) 
            i[p1] = (i[p1] || 0) + 1;
            return p1 + "_" + i[p1].toString() + ":";
        );

期望的输出是：

str = 'View_1Image_1BackgroundImage: Image.png;Position: 0, 0;Width: 320;Height: 480;Button_1BackgroundImage: ButtonTop.png;Position: 61, 83;Width: 217;Height: 58;Button_2BackgroundImage: ButtonBottom.png;Position: 21, 303;Width: 217;Height: 58;'

【问题讨论】：

你明白这是什么意思吗：\S+？

【参考方案1】：

根据您的正则表达式，它在左大括号 前面寻找冒号:，这在您的字符串中不存在。尝试将字符串的开头更改为：

str = 'View:Image...';

---

更新：我不确定 i 变量中包含什么 - 它总是一个空对象吗？但是如果你继续增加数字，这个替换功能可能更适合你（demo）：

str = str.replace(/([a-zA-Z]+_?)(\d+)?:/g, function (m, n, d) 
  d = (parseInt(d,10) || 0) + 1; // add one
  if (!/_$/.test(n))  n += '_';  // add _ if name doesn't have it
  return n + d + ":";
);

【参考方案2】：

一些小而重要的改变应该可以让它发挥作用。

首先，我认为您的str 中有一个小错误。例如，您在str 的末尾有Button_2，但我假设您只希望这是Button，并且您的replace 函数负责递增。否则，结果将是 Button_2_1... 所以我假设您希望 str 是这样的：

str = 'ViewImageBackgroundImage: Image.png;Position: 0, 0;Width: 320;Height: 480;ButtonBackgroundImage: ButtonTop.png;Position: 61, 83;Width: 217;Height: 58;ButtonBackgroundImage: ButtonBottom.png;Position: 21, 303;Width: 217;Height: 58;'

如果是这样，那么这里是更正的代码（我希望它对你有用），后面有解释：

var i = ;

str = str.replace(/(\w+)/g, function (m, p1) 
    i[p1] = (i[p1] || 0) + 1;
    return p1 + "_" + i[p1].toString() + ":";
);

在原始代码中，括号中有\S，但这太笼统了，因为它甚至会捕获左大括号。在正则表达式中，大写字母\S 表示任何不是空格的字符。小写的\w 将找到字母数字字符，因此这可能是您想要捕获单词View 和Image 等的内容。所以现在字符串的任何字母数字部分直接（无空格）后跟一个左大括号将被替换为下划线和数字，随着该项目的每个实例递增。

我不确定你是否真的希望冒号 : 出现在每个数字之后，所以我把它留在了但如果你真的不希望它只是用 return p1 + "_" + i[p1].toString() + ""; 替换 return 语句

否则，如果您对上述内容感到满意（包括冒号），则生成的字符串如下：

View_1:Image_1:BackgroundImage: Image.png;Position: 0, 0;Width: 320;Height: 480;Button_1:BackgroundImage: ButtonTop.png;Position: 61, 83;Width: 217;Height: 58;Button_2:BackgroundImage: ButtonBottom.png;Position: 21, 303;Width: 217;Height: 58;

我认为这就是你想要的。我已经设置了一个小提琴，这样你就可以看到更正的代码in action 并玩一玩。

希望这会有所帮助。

【讨论】：

这非常接近，但是您将每个项目递增 1，其中每个项目都应自行递增。例如，视图、按钮、标签、按钮将是 View_1、Button_1、Label_1、Button_2。看起来我的主要问题是缺少分号

嗨@Rob。我已经更新了我的答案以反映您在此处提到的内容。 return 语句中的 p1 + 现在更有意义了，因为我知道您希望每个项目自行递增，所以我已经相应地调整了正则表达式。

@Rob PS。我不确定您对分号（冒号？）的含义，但我已尝试在我的回答中涵盖这一点。