I have a variable that contains the entire html for a page as a string value:
<html><head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="foo.js"></script>
<link rel="stylesheet" href="foo.css">
</head>
<body>
<div id="wrapper">
<!-- MY PANEL -->
<div id="edit-area"></div>
<div id="my-panel">
<ul class="menu menu-top">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ul class="menu menu-bottom">
<li>a</li>
</ul>
<pre id="code" contenteditable="true"></pre>
</div>
<!-- END MY PANEL -->
<div id="original-content">
<div style="border: 1px solid red; width: 100px; height: 100px"></div>
</div>
</div>
</body></html>
I need to change this value to everything except what’s in between the comments. I need just this:
<html><head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="foo.js"></script>
<link rel="stylesheet" href="foo.css">
</head>
<body>
<div id="wrapper">
<div id="original-content">
<div style="border: 1px solid red; width: 100px; height: 100px"></div>
</div>
</div>
</body></html>
I tried this:
var regex = /<!-- MY PANEL -->.+?<!-- END MY PANEL -->/;
alert(my_variable.replace(regex, ''));
But it just alerts the entire value with the stuff in between the comments intact and not removed.
What is the right way to achieve this?
Let us know if you need some more help