将 <tr>..</tr> 与多个新行匹配答案

【问题标题】：Match <tr>..</tr> with multiple new lines将 <tr>..</tr> 与多个新行匹配
【发布时间】：2017-07-23 17:50:53
【问题描述】：

我对 JS 中的正则表达式有所了解，但我无法弄清楚我所拥有的文本中的新行类型。

上下文是一个get() 调用，只想保留部分结果：

$.get( "...", { id: "3", name: name } )
     .done(function( data ) {
          body.append(data.match(/<tr\s+class="hl"\s+>.*<\/tr>/) );
});

所以我只想保留

<tr class="hl" >

        <td class="ras  fc" >3</td>
        <td class="plsa " ><a href="">M</a> </td>
        <td class="lefv " >3</td>
        <td class="xpm  lc" >3</td>
</tr>

来自整个代码：Regex ex

【问题讨论】：

除非你有充分的理由在正则表达式中这样做，否则不要使用正则表达式。使用解析器。
@TomLord 我不习惯解析器，你能解释一下吗？
使用纯 JS，您可以通过创建一个虚拟元素并操作 DOM 来实现这一点。例如，如果您使用 jQuery，那么您也可以使用一些 shortcuts。下面已经为您提供了一种粗略的方法；我建议你做一些研究。一般来说，you cannot parse HTML with regex - 所以你应该瞄准使用解析器来处理像这样的“不平凡”的事情。
哦，我尝试在网上和其他方式上“创建对象 jquery”，但我无法找到$(data)，正如您在帖子中解释的那样，谢谢，但同时正则表达式完美地帮助了我
如果您有嵌套表，或注释掉 HTML，或<tr> 标签中的额外空格，或额外标签属性等，则正则表达式答案将无法正常工作......如果它可以作为您的用例的“快速修复”，那么就足够公平了，但请注意，这不是“正确”的解决方案。您的代码将包含潜在的错误，因为无法使用正则表达式完全解析 HTML。

标签： javascript regex

【解决方案1】：

你也可以试试这个正则表达式：

(<tr class="hl" >)(.|\n)*?<\/tr>

此备忘单将对您接下来的正则表达式工作非常有帮助： http://www.rexegg.com/regex-quickstart.html

【讨论】：

谢谢，但现在使用 js 会更好;)
var resultString = stringVariable.match(/(<tr class="hl" >)(.|\n)*?<\/tr>/ig)[0]; js 中的完整语句，零索引，因为match 返回匹配数组
我知道，我的意思是完整的 js，stringVariable 来自 html，所以它可能无法工作，为什么你要工作我知道，但是还有另一种方法是正确的，并且每次都可以工作甚至是空间变化

【解决方案2】：

这不是一个特别优雅的解决方案，但是如果您创建了一个元素并将其附加到 DOM，那么选择您想要的节点会相对容易，例如；

var str = '<table id="hhh" class="row_table_data"><thead><tr><td></td><td>J</td><td>N</td><td>E</td></tr></thead><tbody><tr class="hover"><td class="ras " >2</td><td class="plsa " ><a href="">X</a> </td><td class="lefv " >3</td><td class="xpm lc" >1</td></tr><tr class="hl" ><td class="ras  fc" >3</td><td class="plsa " ><a href="">M</a> </td><td class="lefv " >3</td><td class="xpm  lc" >3</td></tr><tr class="hover"><td class="ras " >4</td><td class="plsa " ><a href="">l</a> </td><td class="lefv " >3</td><td class="xpm " >3</td></tr>';

var el = document.createElement( 'div' );
el.style = "display:none;"
el.innerHTML = str;
document.body.appendChild( el );
var tr = document.querySelector( 'tr.hl' );
console.log( tr.outerHTML );

无论如何，我相信你会得到一个更好的解决方案，但只是发布这个作为替代/比较。

【讨论】：

【解决方案3】：

正如 Tom Lord 在评论中所建议的，使用 JS 解析文档比在 html 上使用正则表达式更有效，以防它会改变和其他问题，实际上它只需要使用一个 jquery 对象：

let tr =  $(data).find('.hl');

然后你可以像使用任何其他 jquery 元素一样使用：

 tr.find("td:first").remove();                         //remove column
 tr.find("td:last").after("<td>"+(...)+"</td>");       //  add   column

【讨论】：