正則表達式-將html元素與多行子元素匹配

Question

我有一段簡單的HTML代碼。

<tr>
OtherElement
</tr>
<tr>
HelloWorld
</tr>

我需要匹配包含HelloWorld的<tr></tr>元素。 我正在使用此正則表達式，但它也匹配第一個元素。

<tr[\s\S]*?HelloWorld[\s\S]*?<\/tr>

我正在使用Node.js，因此無法使用后視。

Answer 1

您的正則表達式中有一個錯誤。 此字符集太寬容了： [\\s\\S]*?

請嘗試以下操作：

<tr>\\s*HelloWorld\\s*<\\/tr>

\\s*表示0個或多個空格字符，僅此而已。

您可能想檢查一下為什么要使用RegEx解析HTML。 這是處理已知HTML字符串片段（例如來自數據庫）的有用方法，但是在JavaScript中，最好使用XML解析器或DOM查詢選擇器方法。

Answer 2

不要用正則表達式解析HTML。 而是使用DOM例程和屬性：

function find_hello_world() {
  var trs = document.querySelectorAll('tr');

  for (var i=0; i<trs.length; i++) 
    if (trs[i].textContent === "HelloWorld") return trs[i];

}

Answer 3

我假設您將HTML片段作為字符串接收。 因此，您需要使用DOM解析器對其進行解析（在將所有tr標簽替換為另一個自定義名稱之后，否則解析將失敗），並且僅獲取包含（不等於）字符串HelloWorld那些tr元素。

 var $txt = "<tr>\\nOtherElement\\n</tr>\\n<tr>Initial text\\nHelloWorld\\nSome other text</tr>"; var $el = document.createElement( 'body' ); $el.innerHTML = $txt.replace(/<(\\/?)tr\\b([^<]*)>/g, "<$1tablerows$2>"); // normalize TR tags as tablerows tags var $arr = []; [].forEach.call($el.getElementsByTagName("tablerows"), function(v,i,a) { if (v.innerText.indexOf("HelloWorld") > -1) { $arr.push(v.innerText); } }); document.write(JSON.stringify($arr, 0, 4)); 

正則表達式解決方案既討厭又脆弱，但是可能：

<tr\b[^<]*>[^<]*(?:<(?!tr\b)[^<]*)*HelloWorld[^<]*(?:<(?!\/tr>)[^<]*)*<\/tr>

見正則表達式演示

正則表達式使用展開循環技術來匹配最接近的子模式。

• <tr\\b[^<]*> -與開頭的TR標簽匹配
• [^<]*(?:<(?!tr\\b)[^<]*)* -匹配除<tr任何內容
• HelloWorld文字序列
• [^<]*(?:<(?!\\/tr>)[^<]*)* -除結束外全部</tr>
• <\\/tr> -關閉TR標簽