正则表达式不替换所有出现

Question

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

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/

Answer 1

您正在匹配 greedy，因此正则表达式在 first 出现的“开始主菜单”和 last 中占用了所有字符em> 出现“结束主菜单”。

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

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 如何从 + 更改为 *?。我不认为使用正则表达式来解决这个问题是一个好习惯，但这只是为了向您展示它是如何工作的。

Answer 2

正如我在 cmets 中提到的，如果您希望为此处理 HTML，您可以选择 .header 类，并将其替换为 innerHTML 变量 menuItems 中的新 HTML。

在下面的 sn-p 中，我将变量 menuItems 包装在 ul 标记中，以确保当我们覆盖 div.header 内部的原始 ul 标记时，新的 li 标记具有ul 在他们身边。

另外，我修改了menuItems 中的li 之一，以表明该列表实际上正在被替换。

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 = "<ul><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 (new item)</a></li></ul>";

var placeholderDiv = document.getElementById("placeholder");

// Add the HTML to the placeholder Div.
placeholderDiv.innerHTML = userContent;

setTimeout(function() {
  // Now we need to replace the content inside the header element.
  // Select the children of #placeholder that have class "header"
  var headerElements = document.querySelectorAll("#placeholder div.header");

  if (headerElements.length > 0) {
    console.log("Replacing innerHTML");
    var header = headerElements[0];
    header.innerHTML = menuItems;
  }

}, 1000);

<div id="placeholder"></div>