JavaScript 正则表达式替换宽度属性匹配

Question

我正在使用 RegEx 来匹配文本区域中较小的一组 TinyMCE HTML。宽度太大，造成了径流，所以我用 JavaScript 编写测试代码。

我的问题是为什么 $3 不仅匹配“1000px”而且还匹配 表格标签之后的文档的其余部分？

<script language="javascript">
  // change table width
  function adjustTable(elem0,elem1) {
    // debugging, place results in div
    elem1.innerHTML = elem0.innerHTML.replace(/^(.*)(\u003Ctable.*?\s*?\w*?width\u003D[\u0022\u0027])(\d+px)([\u0022\u0027].*?\u003E)(.*)$/img,"$3");
  }
</script>

<button type="button" onclick="adjustTable(document.getElementById('myTable'),document.getElementById('myResult'))">RegEx</button>

<div id="myTable">
  <table width="1000px">
    <thead>
      <tr><th colspan="3">Table Header</th></tr>
    </thead>
    <tbody>
      <tr><td>alpha</td><td>beta</td><td>gamma</td></tr>
    </tbody>
  </table>
</div>
<textarea id="myResult">
</textarea>

是的，我确实理解 RegEx 和 HTML 是不应该交叉的流，因为 HTML 很复杂，等等。我正在尝试使 HTML 的子集可打印。

我不明白它如何以多种方式匹配。

下面是 3 美元的结果。

1000px
        <thead>
          <tr><th colspan="3">Table Header</th></tr>
        </thead>
        <tbody>
          <tr><td>alpha</td><td>beta</td><td>gamma</td></tr>
        </tbody>
      </table>

它匹配 1000px，但是在 table 标签后面有一些无关的东西，这很奇怪，因为我认为我在 table 标签中强制匹配。想法？

Answer 1

让我们通过记录正则表达式的整个结果来调试它:

  function adjustTable(elem0,elem1) {
    // debugging, place results in div
    console.log ( (/^(.*)(\u003Ctable.*?\s*?\w*?width\u003D[\u0022\u0027])(\d+px)([\u0022\u0027].*?\u003E)(.*)$/img).exec(elem0.innerHTML) );
  }

输出为:

[
0: "  <table width="1000px">"
1: "  "
2: "<table width=""
3: "1000px"
4: "">"
5: ""
index: 1
input: "↵  <table width="1000px">↵    <thead>↵      <tr><th colspan="3">Table Header</th></tr>↵    </thead>↵    <tbody>↵      <tr><td>alpha</td><td>beta</td><td>gamma</td></tr>↵    </tbody>↵  </table>↵"
]

因此，如果您想获得结果“1000px”，请使用以下代码:

(/^(.*)(\u003Ctable.*?\s*?\w*?width\u003D[\u0022\u0027])(\d+px)([\u0022\u0027].*?\u003E)(.*)$/img).exec(elem0.innerHTML)[3]