为何greenText函数的replace方法仅页面加载有效，输入时无法替换方括号？

嗨，我来帮你拆解下这个问题的根源，以及怎么解决它~

为什么动态输入时方括号没被替换成span？ #

你的greenText函数在页面加载时正常，是因为初始文本里只有一对[和]，刚好被replace处理到了。但动态输入时失效，核心问题出在JavaScript的String.replace()默认行为上：

当你用普通字符串作为replace的匹配目标时，它只会替换文本中第一个出现的对应字符，而不是所有匹配项。举个例子：如果你输入[制作网站][学习编程]，代码只会把第一个[换成<span style='color:green'>，第一个]换成</span>，剩下的[和]就原封不动地显示在preview里了，自然看不到绿色样式。

另外还有个小隐患：如果只输入[却没输入]，preview里会出现未闭合的<span>标签，可能导致后面的所有文本都变成绿色，这也不太友好。

修复方案 #

把replace的字符串匹配改成正则表达式全局匹配，加上g标志就能替换所有的方括号了：

function greenText() {
  var textAreaText = $('#textarea').val();
  // 用正则全局替换所有[和]，注意转义[（它在正则里是特殊字符）
  var replacedText = textAreaText
    .replace(/\[/g, "<span style='color:green'>")
    .replace(/\]/g, "</span>");
  $('#preview').html(replacedText);
}

$(function() {
  greenText();
});

额外说明 #

• /\[/g里的\是转义符号，因为[在正则表达式中属于特殊字符，必须转义才能匹配字面意义上的方括号；
• g是全局匹配标志，告诉replace要处理文本中所有符合条件的字符，而不是只处理第一个；
• 如果想更严谨，可以额外处理未闭合的方括号（比如自动补全]，或者过滤无效的未闭合标签），但针对你的核心需求，上面的代码已经能完美解决问题啦。

内容的提问来源于stack exchange，提问作者Ginger Squirrel