JavaScript: Regex to remove string from one tag to another

Question

I have a string

 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <style>body p{max-width: 100% !important;height: auto!important;} div{max-width: 100% !important;height: auto!important;}span{max-width: 100% !important;height: auto!important;} h1{max-width:100% !important; height: auto!important;}h2{max-width: 100% !important;height: auto!important;}h3{max-width: 100% !important;height: auto!important;}h4{max-width: 100% !important;height: auto!important;}h5{max-width: 100% !important;height: auto!important;} img{max-width: 100% !important;height: auto!important;}iframe{max-width:100% !important;height: auto!important;} </style><span style="background-color: rgb(68, 68, 255);">#followforfollow #likeforlike yo!</span> <h2></h2> <h3></h3> <h2></h2> <h1></h1><u></u> 

in this I want to remove everything inside the style tags. Can anyone please tell me the optimal solution.The expected output is:

 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <span style="background-color: rgb(68, 68, 255);">#followforfollow #likeforlike yo!</span> <h2></h2> <h3></h3> <h2></h2> <h1></h1><u></u> 

Answer 1

There is no need for regex since there are DOM methods available to deal with it.

Create a dummy div element and use querySelector to remove the child style element.

var div = document.createElement( "div" );
div.innerHTML = str; //your input string
div.removeChild( div.querySelector( "style" ) );
console.log( div.innerHTML );

Demo

 var str = `<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <style>body p{max-width: 100% !important;height: auto!important;} div{max-width: 100% !important;height: auto!important;}span{max-width: 100% !important;height: auto!important;} h1{max-width:100% !important; height: auto!important;}h2{max-width: 100% !important;height: auto!important;}h3{max-width: 100% !important;height: auto!important;}h4{max-width: 100% !important;height: auto!important;}h5{max-width: 100% !important;height: auto!important;} img{max-width: 100% !important;height: auto!important;}iframe{max-width:100% !important;height: auto!important;} </style><span style="background-color: rgb(68, 68, 255);">#followforfollow #likeforlike yo!</span> <h2></h2> <h3></h3> <h2></h2> <h1></h1><u></u>`; var div = document.createElement( "div" ); div.innerHTML = str; div.removeChild( div.querySelector( "style" ) ); console.log( div.innerHTML ); 

Answer 2

If you can use jquery then you don't need to use regex.

$(document).ready(function(){
 $('style').remove();
});

Answer 3

Here is the regex you are looking for. Short and simple.

 var str = `<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <style>body p{max-width: 100% !important;height: auto!important;} div{max-width: 100% !important;height: auto!important;}span{max-width: 100% !important;height: auto!important;} h1{max-width:100% !important; height: auto!important;}h2{max-width: 100% !important;height: auto!important;}h3{max-width: 100% !important;height: auto!important;}h4{max-width: 100% !important;height: auto!important;}h5{max-width: 100% !important;height: auto!important;} img{max-width: 100% !important;height: auto!important;}iframe{max-width:100% !important;height: auto!important;} </style><span style="background-color: rgb(68, 68, 255);">#followforfollow #likeforlike yo!</span> <h2></h2> <h3></h3> <h2></h2> <h1></h1><u></u>`; //replace everything between <span></span> str = str.replace(/<style>(.|\\r?\\n)*<\\/style\\>/,''); console.log(str);