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

时间：2018-01-30 11:44:24

标签： regex

我有以下表格格式：

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




                2.004





            </td>

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

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

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

PPS：男人和男孩 - 请把你的建议写成答案，而不是评论，所以我可以接受并尊重他们。

解决方案：(?:<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>

3 个答案:

答案 0 :(得分：1)

更新（JavaScript RegExp）

获取<td>

内的数字

忽略事实代码将无法正常运行，并提供一个正则表达式，只会在第一个td.text-right 中获得 的数量：

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

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

  1. 开始非捕获 (?: 文字 <td 字边框d \ s＆amp;零到任意数量的字符，直到 \b.*? 字面 text-right 字边框t \ s＆amp;零到任意数量的字符，直到 \b.*? 零到任意数量的字符，直到 \D*? 结束非捕获 )

  2. 开始捕获 ( 一个到任意数量的数字，直到 [0-9]+? 为零到任意数量的文字。或者，直到 [.,]*? 0到任意数量的数字，直到 [0-9]*? 结束捕获 )

    < / LI>

  3. 开始正向展望 (?= 为零到任意数量的任何非数字字符，直到 \D*? 字面值转发正斜杠 <\/ 结束积极展望 )

    4. 更好的正则表达式

    这一点集中在这样一个事实，即每个目标都位于最后一列，方法是向前添加<\/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>

答案 1 :(得分：0)

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

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

说明：

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

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

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

答案 2 :(得分：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());
    });
};
相关问题
最新问题