正则表达式-将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标签