正则表达式：表格单元格中的匹配编号

问题描述 投票：1回答：3

我有以下表格单元格：

<td class="text-right"
                onmouseenter="$(this).find('.overlay-viewable-box:first').show();"
                onmouseleave="$(this).find('.overlay-viewable-box:first').hide();">




                2.004





            </td>

它也包含空格和换行符。 class =“text-right”在页面上不是唯一的，但第一个 - 如果它可以帮助关联它。

我想只匹配数字（这一个 - 2.004，或任何其他，它总是只有一个数字） - 有或没有点和/或逗号。

PS：是的，我完全同意用正则表达式解析html的想法不是最好的 - 任何其他方法都会是这样的开销，它不值得做:(

PPS：伙计们和guls - 请将您的建议作为答案，而不是评论，因此我可以接受并尊重他们。

解决方案：(?:<td\b.*?text-right\b.*?\D*?;">)([\s\S\d]*?)(?=\D*?<\/)

编辑：全长HTML：

<div class="box    " >

        <div class="box-head    " >
            <div class="box-icon">
            <span class="icon ">&#xf0ae;</span>        </div>
        <span class="divider"></span>

                    <div class="box-title box-title-space-1">
            <span>Keyword-Profile</span></div>

    <div class="box-options dropdown  box-options-no-divider">


            <div class="divider "></div>
        <div class="box-icon "><a
                    class="button">
                <span class="icon ">&#xf013;</span>            </a></div>

        <ul class="dropdown-menu">


                                <li
                                    >                        <a   onclick="" class="modal"><div><div class="icon"><div>&#xf055;</div></div><div class="text"> Add to Dashboard</div></div></a>
                                    </li>

                                <li
                                    ><span class="box-menu-seperator"></span>                        <a   onclick="
                                                                                " href="" class="modal"><div><div class="icon"><div>&#xf055;</div></div><div class="text"> Add to Report</div></div></a>
                                    </li>

        </ul>

</div>

</div>
<div class="module-loading-blocker">
    <div class="module-loading-blocker-icon">
        <div style="width: 40px; height: 40px; display: inline-block;">
    <svg width="100%" height="100%" class="loading-circular" viewBox="0 0 50 50">
        <circle class="loading-path" cx="25" cy="25" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
    </svg>
</div>    </div>
</div>
    <div class="box-content box-body box-table" >    <table class="table table-spaced">
            <tr>
            <td>




                            Top-10





            </td>

            <td class="text-right"
                onmouseenter="$(this).find('.overlay-viewable-box:first').show();"
                onmouseleave="$(this).find('.overlay-viewable-box:first').hide();">




                2.004





            </td>
        </tr>
            <tr>
            <td>




                            Top-100





            </td>

            <td class="text-right"
                onmouseenter="$(this).find('.overlay-viewable-box:first').show();"
                onmouseleave="$(this).find('.overlay-viewable-box:first').hide();">




                237.557





            </td>
        </tr>
            <tr>
            <td>




                            &empty; Position





            </td>

            <td class="text-right"
                onmouseenter="$(this).find('.overlay-viewable-box:first').show();"
                onmouseleave="$(this).find('.overlay-viewable-box:first').hide();">




                60





            </td>
        </tr>
        </table>
</div></div><div class="module" style="display: none;">x</div>
regex
3个回答
1
投票

Update (JavaScript RegExp)

获取<td>内的数字

忽略事实代码将无法正常工作，并提供一个正则表达式，它将获得第一个td.text-right中的数字只尝试这个：

/(?:<td\b.*?text-right\b.*?\D*?)([0-9]+?[.,]*?[0-9]*?)(?=\D*?<\/)/

|1|]=-------------------------------------=[|2|]=-----------------------=[|3|]=------------=|]

  1. 开始非捕获(?:文字<td字边界d \ s＆零到任意数量的char，直到\b.*?文字text-right字边界t \ s＆零到任意数量的char，直到\b.*?零到任何数量的字符不是数字直到\D*?结束非捕获)
  2. 开始捕获(一个到任意数量的数字，直到[0-9]+?为零到任意数字的文字。或者，直到[.,]*?零到任意数量的数字，直到[0-9]*?结束捕获)
  3. 开始积极向前看(?=零到任何数字的任何非数字char直到\D*?文字与逃脱正斜线<\/结束积极向前看)

更好的正则表达式

这一点集中在这样一个事实，即每个目标都位于最后一列，通过添加：<\/td>\s*?</tr>进行正面展望。

/\b([0-9]+?[.,]*?[0-9]*?)(?=\D*?<\/td>\s*?<\/tr>)/g;

它具有更清晰的结果，匹配和捕获组都是相同的。没有副作用的非捕获组。

演示

var rgx = /\b([0-9]+?[.,]*?[0-9]*?)(?=\D*?<\/td>\s*?<\/tr>)/g;

var str = document.documentElement.innerHTML;

let hits;

while ((hits = rgx.exec(str)) !== null) {

    if (hits.index === rgx.lastIndex) {
        rgx.lastIndex++;
    }
    
    hits.forEach(function(hit, idx) {
        console.log(`Found match, group ${idx}: ${hit}`);
    });
}
<div class="box    ">

  <div class="box-head    ">
    <div class="box-icon">
      <span class="icon ">&f0ae;</span> </div>
    <span class="divider"></span>

    <div class="box-title box-title-space-1">
      <span>Keyword-Profile</span></div>

    <div class="box-options dropdown  box-options-no-divider">


      <div class="divider "></div>
      <div class="box-icon ">
        <a class="button">
          <span class="icon ">&f013;</span> </a>
      </div>

      <ul class="dropdown-menu">


        <li>
          <a onclick="" class="modal">
            <div>
              <div class="icon">
                <div>&f055;</div>
              </div>
              <div class="text"> Add to Dashboard</div>
            </div>
          </a>
        </li>

        <li><span class="box-menu-seperator"></span>
          <a onclick="
                                                                                " href="" class="modal">
            <div>
              <div class="icon">
                <div>&f055;</div>
              </div>
              <div class="text"> Add to Report</div>
            </div>
          </a>
        </li>

      </ul>

    </div>

  </div>
  <div class="module-loading-blocker">
    <div class="module-loading-blocker-icon">
      <div style="width: 40px; height: 40px; display: inline-block;">
        <svg width="100%" height="100%" class="loading-circular" viewBox="0 0 50 50">
        <circle class="loading-path" cx="25" cy="25" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
    </svg>
      </div>
    </div>
  </div>
  <div class="box-content box-body box-table">
    <table class="table table-spaced">
      <tr>
        <td>




          Top-10





        </td>

        <td class="text-right" onmouseenter="\$(this).find('.overlay-viewable-box:first').show();" onmouseleave="\$(this).find('.overlay-viewable-box:first').hide();">




          2.004





        </td>
      </tr>
      <tr>
        <td>




          Top-100





        </td>

        <td class="text-right" onmouseenter="\$(this).find('.overlay-viewable-box:first').show();" onmouseleave="\$(this).find('.overlay-viewable-box:first').hide();">




          237.557





        </td>
      </tr>
      <tr>
        <td>




          &empty; Position





        </td>

        <td class="text-right" onmouseenter="\$(this).find('.overlay-viewable-box:first').show();" onmouseleave="\$(this).find('.overlay-viewable-box:first').hide();">




          60





        </td>
      </tr>
    </table>
  </div>
</div>
<div class="module" style="display: none;">x</div>
0
投票

一个简单的解决方案，前提是您的解析引擎可以跨行搜索，并支持外观：

(?<=>\s*)([0-9]+(?:\.[0-9]+)?)(?=\s*<)

解释：

第一部分是(?<=>)。 (?<=regex)被称为正向lookbehind，它告诉解析器在实际匹配部分之前检查是否存在匹配正则表达式的模式。在这种情况下，它将在>之后查找任意数量的空格。

核心部分[0-9]+(\.[0-9]+)?匹配一个或多个数字，可选地后跟一个点和另一个一个或多个数字组。最后一个?表示小数部分是可选的。

最后一部分是(?=<)。 (?=regex)被称为正向前瞻，它告诉解析器在实际匹配部分之后检查是否存在匹配正则表达式的模式。在这种情况下，它将查找任意数量的空格，然后是<。

0
投票

假设您的正则表达式引擎了解pcre，请尝试

/>[\s]*([[:digit:]]+(\.[[:digit:]]+)?)[\s]*<\//g

匹配一个可选的空格包围的数字（包括换行符/换行符），这是html元素的唯一文本内容。捕获组1保留该数字。

您可能需要调整捕获组内的模式，以满足您认为是“数字”的词类型。

如果假设的结构html上下文对您的目的而言过于严格，则删除表达式的开头和结尾（即.>，<\/）。鉴于您的问题，您意识到这样做会增加误报的风险。

看到它live at Regex101

顺便说一下，大多数编程语言都有html解析器库，可以解析宽松的语法错误，并通过简单的界面迭代所有文本内容。只是为了论证，如果jQuery或一些类似的功能可用，你可以继续this SO answer的行（只需用正则表达式测试替换内部return表达式，如（未经测试的代码）：

var re = RegExp('[[:digit:]]+(\.[[:digit:]]+)?', 'g');
$.fn.findByREText = function (re) {
    $('*').contents().filter(function () {
        return re.test($(this).text.trim());
    });
};
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.