javascript - 使用捕获组查找并替换 json 字符串中所有出现的短语

Question

我有一个字符串化的 JSON，如下所示:

...

"message":null,"elementId:["xyz1","l9ie","xyz1"]}}]}], "startIndex":"1", 
"transitionTime":"3","sourceId":"xyz1","isLocked":false,"autoplay":false
,"mutevideo":false,"loopvideo":false,"soundonhover":false,"videoCntrlVisibility":0,
...,"elementId:["dgff","xyz1","jkh90"]}}]}]

...它继续。

我需要处理的部分是 elementId 键的值。 (第一行中的第二个键，也是最后一个键)。

此键出现在 JSON 字符串的多个位置。此键的值是一个包含 4 个字符 ID 的数组。

我需要用一个新 ID 替换其中一个 ID。

这个想法的核心是这样的:

var elemId = 'xyz1' // for instance
var regex = new RegExp(elemId, 'g');
var newString = jsonString.replace(regex, newRandomId);
jsonString = newString;

这种方法有几个问题。正则表达式将匹配 JSON 中任何位置的 id。我需要一个只在 elementId 数组中匹配它的正则表达式；没有其他地方。

我正在尝试使用捕获组来匹配我需要的事件，但我无法完全破解它。我有:

/.*elementId":\[".*(xyz1).*"\]}}]/

但这与数组中第一次出现的 'xyz1 不匹配。

所以，首先，我需要一个可以匹配 elementId 中所有 'xyz1' 的正则表达式；但别处。如果有帮助，则 elementId 结束后方括号和大括号的顺序不会在字符串中的任何位置更改。

其次，即使我有一个有效的捕获组，string.replace 也不会按预期运行。它不是只替换捕获组内的匹配项，而是替换整个匹配项。

因此，我的第二个要求是只替换捕获的组，而不是整个匹配项。

需要一段 js 代码，它将在需要的地方替换我的 'xyz1' 并返回以下字符串(假设 newRandomId 是 'abcd'):

"message":null,"elementId:["abcd","l9ie","abcd"]}}]}], "startIndex":"1", 
"transitionTime":"3","sourceId":"xyz1","isLocked":false,"autoplay":false
,"mutevideo":false,"loopvideo":false,"soundonhover":false,"videoCntrlVisibility":0,
...,"elementId:["dgff","abcd","jkh9"]}}]}]

请注意，“sourceId”的值不受影响。

编辑:我必须使用 JSON。我无法解析它并使用该对象，因为我不知道旧 ID 可能在对象中的所有位置，并且多次循环遍历它(对于多个元素)会很耗时

Answer 1

假设您不能只解析和更改 JS 对象，您可以使用 2 个正则表达式:一个用于提取数组，一个用于更改内部所需的 ID:

var output = input.replace(/("elementId"\s*:\s*\[)((?:".{4}",?)*)(\])/g, function(_,start,content,end){
  return start + content.replace(/"xyz1"/g, '"rand"') + end;
});

参数 _、start、content、end 是正则表达式的结果 (documentation here) :

• _ 是整个匹配的字符串(从 "elementId:\[ 到 ])。我选择这个名字是因为它是一个古老的约定对于你不使用的参数
• start为第一组("elementId:\[)
• content是第二个捕获的组，也就是数组的内部部分
• end id 第三组，]

使用组而不是硬编码返回字符串中的 start 和 end 部分有两个目的

• 避免重复(DRY 原则)
• 使可变字符串成为可能(例如，在我的正则表达式中，我接受 : 之后的可选空格)

var input = document.getElementById("input").innerHTML.trim();
var output = input.replace(/("elementId":\s*\[)((?:".{4}",?)*)(\])/g, function(_,start,content,end){
  return start + content.replace(/"xyz1"/g, '"rand"') + end;
});

document.getElementById("output").innerHTML = output;

Input:
<pre id=input>
"message":null,"elementId":["xyz1","l9ie","xyz1"]}}]}], "startIndex":"1", 
"transitionTime":"3","sourceId":"xyz1","isLocked":false,"autoplay":false
,"mutevideo":false,"loopvideo":false,"soundonhover":false,"videoCntrlVisibility":0,
...,"elementId":["dgff","xyz1","jkh9"]}}]}]
</pre>
Output:
<pre id=output>
</pre>

注意事项:

• 如果它们不是在一个数组中重复搜索到的 ID，那么在一个正则表达式中完成整个操作会很容易。但是目前的结构使得处理多个 id 以同时替换变得容易。
• 我使用非捕获组 (?:...) 来整理传递给外部替换回调的参数