JavaScript - 替换字符串中的方括号

Question

我有一个简单的字符串，想要将[~sample]转换为@sample。例如：

var string = 'Completely engineer client-based strategic [~theme] areas before cross [~media] technology';
string.replace('[~', '@');

我尝试了上面的解决方案，但它只转换第一个，并且]无法删除。

---

现在我学会了如何使用/g。

- user3631047

---

你应该更加努力尝试。谷歌可以帮到你。在这里提问时，需要展示你至少尝试过一行代码或思路。 - Roko C. Buljan

[~sample] to @smaple or to @sample? 我只是确认一下，这是一个打字错误吗？ - user4227915

@WashingtonGuedes 这显然是一个打字错误。 - Roko C. Buljan

Answer 1

问题比简单嵌套 .replace [@ 和 ] 更为复杂。

var string = 'Strategic [~theme] areas with cross [~media] technology [this is fine] ok?';

document.body.innerHTML = string.replace(/\[~([^\]]+)\]/g, '@$1');

([^\]]+) 确保捕获任何不是 ] 但被 [~ 和 ] 包围的字符，这是更好的解决方案，可以防止像 [don't mess with me] 这样的文本被... 搞乱。

详细解释了 RegExp，请点击此处

- Roko C. Buljan

---

“'战略[主题]领域与跨[媒体]技术 [这没问题] 行吗？'”在 OP 中不是字符串吗？为什么要包含原始问题和答案中没有描述的要求？ - guest271314

为了让更好的解决方案始终可见于StackOverflow，@guest271314。 - Roko C. Buljan

@RokoCBuljan 是的，尽管解决方案中的字符串不是问题中的原始字符串，也没有包含在问题的要求描述中。您是如何确定应该替换或不替换不包含~的 [ ]？问题中没有这样的情况标准吗？ - guest271314

Answer 2

尝试使用这段代码：

string.replace(/(\[~)(\w+)(\])/g, function(match, p1, p2, p3) {
  // p1 = [~
  // p2 = theme / media / whateverWord
  // p3 = ]
  return '@' + p2
  // Returns @whateverWord
})

在第一组：

- \[将选择一个[ - ~将选择一个~

在第二组：

- \w将选择任何字母数字字符或_ - +表示字母数字字符必须至少出现一次，即在[~和]之间必须至少有1个字母   在第三组：

- \]将选择任何] 在函数中：

- match未在输出中使用，但它包含整个匹配的子字符串 - p1包含[~ - p2包含[~和]之间的单词，即theme或media - p3包含] return语句返回一个@，后跟[~和]之间的单词

这将替换所有的[~为@ 以下是一个工作示例：

var string = 'Completely engineer client-based strategic [~theme] areas before cross [~media] technology. Also, [this tag] [will be kept]'

document.body.innerHTML = string.replace(/(\[~)(\w+)(\])/g, function(match, p1, p2, p3) {
  return '@' + p2
})

---

编辑：实际上，你可以简化它：

string.replace(/(\[~)(\w+)(\])/g, '@$2')

请查看下面的演示：

var string = 'Completely engineer client-based strategic [~theme] areas before cross [~media] technology. Also, [this tag] [will be kept]'

document.body.innerHTML = string.replace(/(\[~)(\w+)(\])/g, '@$2')

$2 包含第二个捕获组的内容，第二个捕获组包含 [~ 和 ] 之间的文本。所以输出是一个@，后跟文本。

这比上面的版本简单、快速，并占用更少的空间。

- Kaspar Lee

---

既然我显然只是复制了你的答案，那么我现在必须点赞你的哈哈。 - Adam Buchanan Smith

这不会搞砸 " hello [something not a placheloder] " 吗？ - dandavis

不考虑其他方括号 - vicneanschi

无法处理此字符串 '[完全] [工程师] [] 客户端战略[主题]跨越[媒体]技术'. - vicneanschi

Answer 3

You could use RegExp /(\[~)|(\])/g

var string = 'Completely engineer client-based strategic [~theme] areas before cross [~media] technology';

var res = string.replace(/(\[~)|(\])/g, function(match, p1, p2) {
  if (p1) return "@";
  if (p2) return ""
});

document.body.textContent = res;

- guest271314

---

@JDB 字符串中的 OP 没有包含 [citation needed]，也没有指示该字符串部分的结果应该是什么。不确定为什么要在注释中包含这个要求。 - guest271314

更好的意思是更快地运行，匹配错误更少，代码更短：str.replace(/\[~(\w+)\]/g, "@$1")。 - dandavis

@AdamBuchananSmith 没问题。相信这里没有投下 0 "踩" 的人。 - guest271314

@vicneanschi “试试这个字符串，看看我的意思是什么''[完全] [工程师] [] 客户端战略 [主题] 区域在跨越 [媒体] 技术之前'”？那不是原始问题中的字符串。原始问题没有涉及可能包含 [ 或 ] 字符的字符串的其他部分；包括或不包括 [，] 中的字符，也没有说明预期结果应该是什么。你是如何确定应该替换 [Completely] [engineer] [] 字符串中的 [ ]，还是不替换的呢？ - guest271314

@JDB 鉴于原问题中的字符串不包含[this tag] [will be kept]，也没有说明如果在字符串中找到这些字符串片段时期望的结果是什么；您是如何确定[this tag] [will be kept]中的[或]应该被替换还是不应该被替换的？ - guest271314

Answer 4

"Completely engineer client-based strategic [~theme] areas before cross [~media] technology [with some] other bits.".replace(/\[~([^\]]+)\]/g,"@$1");

你需要在搜索中加上波浪号(~)进行筛选。我对所有疯狂的负分评价感到惊讶。人们都在努力提供帮助。如果有人对帖子和回答有问题，解释为什么你会打负分更有帮助，而不是没有解释地随便点踩。

正如其他人所说，谷歌是朋友，尝试在www.regular-expressions.info上搜索获取更多帮助。

- Paurian

---

@Druzion，你在回答中涵盖了大部分细节。主要区别在于这个替换强制搜索结果像[value]，并将该值作为文字@符号后的替换。- 这种方法的好处是保护括号不受波浪线的影响。在这个提议中，"[don't change me] but [change] me" 将产生 "[don't change me] but @ change me"，而你的解决方案将产生 "[don't change me but @ change me" 请注意，在使用你的提议进行测试时，关闭括号丢失了。 - Paurian

Answer 5

以下代码使用正则表达式来查找所有以[~开头，以]结尾的序列组。它还捕获中间的单词。 replace函数的第二个参数中的$1引用了找到的单词。

var string = 'Completely engineer client-based strategic [~theme] areas before cross [~media] technology'


document.body.innerHTML = string.replace(/\[~(\w+)\]/g, '@$1');

- vicneanschi

---

@dandavis 我在测试和发布我的回答时没有看到您的评论 :) - vicneanschi

Answer 6

我认为这就是你要找的 https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/33/

string.replace(/\[~/g, '@').replace(/\]/g, '');

var string = 'Completely engineer client-based strategic [~theme] areas before cross [~media] technology';
alert("Starting string:" +string);

var res = string.replace(/\[~/g, '@').replace(/\]/g, '');
alert("Final string: "+res)

- Adam Buchanan Smith