Question

我试图替换所有出现的正则表达式搜索＆amp;使用以下代码替换，并且由于某种原因它只替换第一次出现：

＆＃13;

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);

＆＃13;

我似乎无法弄明白为什么，我在引用/g中说过，并且我已经尝试将/g添加到userContent.replace但是它没有＃＆＃ 39;似乎喜欢它。

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

Answer 1

正如我在评论中提到的，如果您希望为此处理HTML，可以选择.header类，并使用变量{{中的新HTML替换它innerHTML 1}}。

在下面的代码段中，我已将变量menuItems包装在menuItems标记中，以确保在我们覆盖原始ul标记内的ul时， div.header标记周围有li个。

此外，我修改了ul中的li之一，以表明该列表实际上已被替换。

＆＃13;

menuItems

＆＃13;

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);

＆＃13;

Answer 2

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

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

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

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

2 个答案: