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>

please add what have you tried so far to remove the mentioned string. — Barbaros Özhan
– Barbaros Özhan, Commented Jan 6, 2018 at 11:27

gurvinder372 · Accepted Answer · 2018-01-06 11:21:43Z

2

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

answered Jan 6, 2018 at 11:21

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ankit Agarwal Over a year ago

No need to lengthen the code when you can achieve that using regex

Ankit Agarwal Over a year ago

Yes it is as compared to one.

Ankit Agarwal Over a year ago

And also the OP asks for regex solution

gurvinder372 Over a year ago

I meant it is not lengthy enough to become unreadable and is anyways more readable than a regex solution.

Ankit Agarwal · Accepted Answer · 2018-01-06 11:41:18Z

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

ninesalt · Accepted Answer · 2018-01-06 11:23:14Z

0

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

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

answered Jan 6, 2018 at 11:23

ninesalt

4,3926 gold badges45 silver badges86 bronze badges

Collectives™ on Stack Overflow

JavaScript: Regex to remove string from one tag to another

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related