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

如果你可以使用jquery，那么你不需要使用正則表達式。

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

Answer 3

這是你正在尋找的正則表達式。 簡短而簡單。

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