結束標簽到開始標簽之間的Javascript reg exp

Question

如何使用正則表達式選擇</h2>結束標記之后的文本，直到下一個<h2>開始標記

<h2>my title here</h2>
Lorem ipsum dolor sit amet <b>with more tags</b>
<h2>my title here</h2>
consectetur adipisicing elit quod tempora

在這種情況下，我想選擇此文本： Lorem ipsum dolor sit amet <b>with more tags</b>

Answer 1

試試這個： /<\\/h2>(.*?)</g

這將找到一個結束標簽，然后在新的開始標簽之前捕獲任何內容。

在 JS 中，您可以這樣做以獲取文本：

substr = str.match(/<\/h2>(.*?)<h2/)[1];

正則表達式101

 var str = '<h2>my title here</h2>Lorem ipsum <b>dolor</b> sit amet<h2>my title here</h2>consectetur adipisicing elit quod tempora'; var substr = str.match(/<\\/h2>(.*?)<h2/)[1].replace(/<.*?>/g, ''); console.log(substr); //returns: Lorem ipsum dolor sit amet

Answer 2

嘗試

/<\/h2>((?:\s|.)*)<h2/

你可以在這個 regex tester 上看到它的作用。

您也可以在下面的示例中看到它。

 (function() { "use strict"; var inString, regEx, res, outEl; outEl = document.getElementById("output"); inString = "<h2>my title here</h2>\\n" + "Lorem ipsum dolor sit amet <b>with more tags</b>\\n" + "<h2> my title here </h2>\\n" + "consectetur adipisicing elit quod tempora" regEx = /<\\/h2>((?:\\s|.)*)<h2/ res = regEx.exec(inString); console.log(res); res.slice(1).forEach(function(match) { var newEl = document.createElement("pre"); newEl.innerHTML = match.replace(/</g, "&lt;").replace(/>/g, "&gt;"); outEl.appendChild(newEl); }); }());

 <main> <div id="output"></div> </main>

我在您的示例中添加了\\n以模擬新行。 不知道為什么您不只是使用querySelector()選擇<h2>並以這種方式獲取文本。

Answer 3

使用 string replace()函數匹配標簽並刪除它們。 此外，這個提議的解決方案removes any single closure tags like <br/>,<hr/>等

 var htmlToParse = document.getElementsByClassName('input')[0].innerHTML; var htmlToParse = htmlToParse.replace(/[\\r\\n]+/g,""); // clean up the multiLine HTML string into singleline var selectedRangeString = htmlToParse.match(/(<h2>.+<h2>)/g); //match the string between the h2 tags var parsedString = selectedRangeString[0].replace(/((<\\w+>(.*?)<\\/\\w+>)|<.*?>)/g, ""); //removes all the tags and string within it, Also single tags like <br/> <hr/> are also removed document.getElementsByClassName('output')[0].innerHTML += parsedString;

 <div class='input'> <i>Input</i> <h2>my title here</h2> Lorem ipsum dolor sit amet <br/> <b>with more tags</b> <hr/> <h2>my title here</h2> consectetur adipisicing elit quod tempora </div> <hr/> <div class='output'> <i>Output</i> <br/> </div>

代碼中需要記住的幾件事。

htmlToParse.match(/(<h2>.+<h2>)/g); 返回一個字符串數組，即與此正則表達式匹配的所有字符串。

selectedRangeString[0]我只是將第一個匹配項用於演示目的。 如果你想玩所有的字符串，那么你可以用相同的邏輯循環它。