正規表現は、すべての出現

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と私はuserContent.replaceに/gを追加しようとしましたが、それはちょうどそれが好きではないようだと思った理由を把握することはできません。

フィドル：https://jsfiddle.net/xqt3kj7r/

Answer 1

あなたは貪欲に一致しており、その正規表現は、「スタートメインメニュー」の最初の発生と 'の最後発生内のすべての文字を食べてしまいましたメインメニューを終了します。

貪欲でなければならないものは、です。 REは、*?に+からどのように変化するかを

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

注：これを試してみてください。これに正規表現で近づけるのは良い習慣ではありませんが、これはどのように動作したかを示すためのものです。

Answer 2

私はコメントで言及として、あなたはこのためにHTMLを処理したい場合、あなたは.headerクラスを選択し、それが変数menuItemsから新しいHTMLとinnerHTMLだ置き換えることができます。以下のスニペットで

、私たちは、元ulタグインサイダーdiv.headerを上書きするよう、新しいliタグがそれらの周りulを持っていることを確実にするためにulタグで変数menuItemsをラップしています。

また、私はリストが実際に置き換えられていることを示すためにをmenuItemsに変更しました。

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>