JavaScript:正则表达式将字符串从一个标签删除到另一个标签

Question

我有一个字符串

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

在这里，我想删除样式标签中的所有内容。谁能告诉我最佳解决方案。预期输出为：

<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

不需要

正则表达式，因为有 DOM 方法可用于处理它。

创建虚拟div元素并使用querySelector删除子style元素。

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

演示

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

这是您正在寻找的正则表达式。简短而简单。

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

Answer 3

如果你可以使用jquery，那么你就不需要使用正则表达式。

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