JavaScript的正则表达式替换宽度属性匹配(JavaScript Regex Replace

我使用正则表达式来匹配从一个textarea较窄一套TinyMCE的HTML的。 宽度过大，产生径流，所以我在做的JavaScript测试代码。

我的问题是，为什么$ 3中没有只匹配“1000像素”也table标签后的文档的其他部分相匹配？

<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>

是的，我明白正则表达式和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>

它匹配了1000像素，但随后有表标签，这是奇怪的后多余的东西，因为我觉得我是强迫在表标签匹配。 思考？

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>↵"
]

所以，如果你想要得到的结果，“1000像素”，然后使用此代码：

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

Answer 2:

该点并不在JavaScript中匹配换行符字符。 既然你设置/m改性剂，在$也匹配在线路末端，而不仅仅是文件的末尾。

因此，最终的(.*)当你更换比赛中您正则表达式不匹配任何东西，留下完整的字符串的其余部分$3 （其中包含1000px ）。

看到它的regex101.com 。

文章来源: JavaScript Regex Replace Width Attribute Matching