javascript - 正则表达式不能替换所有出现的事件

我正在尝试使用以下代码替换所有出现的Regex搜索并替换，由于某种原因，它仅替换了第一次出现的正则表达式：

var userContent = '<div class="header"><!--Start Main Menu--><ul class="main-menu"> <li><a href="/">Home</a> </li> <li><a href="/">About</a> </li> <li><a href="/">Portfolio</a> </li> <li><a href="/">Contact</a> </li> </ul><!--End Main Menu--></div><div class="footer"><!--Start Main Menu--><ul class="main-menu"> <li><a href="/">Home</a> </li> <li><a href="/">About</a> </li> <li><a href="/">Portfolio</a> </li> <li><a href="/">Contact</a> </li> </ul><!--End Main Menu--></div>';

var menuItems = "<li><a href='/'>Home</a></li><li><a href='/about'>About</a></li><li><a href='/portfolio'>Portfolio</a></li><li><a href='/contact'>Contact</a></li>";

var quote = function(str) {
    return str.replace(/([.?*+^$[\]/(){}|-])/g, "\\$1");
};

var re = new RegExp(quote('<!--Start Main Menu-->') + "[^]+" + quote('<!--End Main Menu-->'), 'g');
userContent = userContent.replace(re, '<!--Start Main Menu--><ul class="main-menu">' + menuItems + '</ul><!--End Main Menu-->');

console.log(userContent);

我似乎无法弄清楚原因，我在引号/g中进行了说明，并尝试将/g添加到userContent.replace中，但似乎并不喜欢它。

小提琴：https://jsfiddle.net/xqt3kj7r/

最佳答案

您正在匹配贪婪，因此正则表达式会吃掉第一次出现的“开始主菜单”和最后一次出现的“结束主菜单”中的所有字符。

所需要的是非贪婪的匹配。尝试这个：

var userContent = '<div class="header"><!--Start Main Menu--><ul class="main-menu"> <li><a href="/">Home</a> </li> <li><a href="/">About</a> </li> <li><a href="/">Portfolio</a> </li> <li><a href="/">Contact</a> </li> </ul><!--End Main Menu--></div><div class="footer"><!--Start Main Menu--><ul class="main-menu"> <li><a href="/">Home</a> </li> <li><a href="/">About</a> </li> <li><a href="/">Portfolio</a> </li> <li><a href="/">Contact</a> </li> </ul><!--End Main Menu--></div>';

var menuItems = "<li><a href='/'>Home</a></li><li><a href='/about'>About</a></li><li><a href='/portfolio'>Portfolio</a></li><li><a href='/contact'>Contact</a></li>";

var quote = function(str) {
    return str.replace(/([.?*+^$[\]/(){}|-])/g, "\\$1");
};

var re = new RegExp(quote('<!--Start Main Menu-->') + "[^]*?" + quote('<!--End Main Menu-->'), 'g');
userContent = userContent.replace(re, '<!--Start Main Menu--><ul class="main-menu">' + menuItems + '</ul><!--End Main Menu-->');

console.log(userContent);

请注意RE如何从+更改为*?。我发现使用正则表达式解决此问题不是一个好习惯，但这只是向您展示它是如何工作的。

关于javascript - 正则表达式不能替换所有出现的事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47493180/