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

我使用正则表达式来匹配文本区域中较窄的TinyMCE HTML集。宽度太大，会产生溢出，所以我用JavaScript编写测试代码

我的问题是为什么$3不仅与“1000px”匹配，而且与“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>

//更改表格宽度
功能调整表（elem0、elem1）{
//调试，将结果放入div
elem1.innerHTML=elem0.innerHTML.replace（/^（.*）（\u003Ctable.*？\s*？\w*？width\u003D[\u0022\u0027]）（\d+px）（[\u0022\u0027].\u003E）（.$/img，$3”）；
}
正则表达式
表头
阿尔法贝塔加马

是的，我知道正则表达式和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
表头
阿尔法贝塔加马

---

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

点与JavaScript中的换行符不匹配。由于设置了

/m

修饰符，

$

也会在行的末尾匹配，而不仅仅是文件的末尾

因此，正则表达式中的最后一个

（.*）

与任何内容都不匹配，当您将匹配项替换为

$3

（其中包含

1000px

）时，字符串的其余部分保持不变

---

查看它。

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

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

---

你可以完全抛弃正则表达式，改用CSS覆盖宽度：

#myTable table{width:100%}

例如：你说你知道不使用正则表达式，但你还是想使用它们？为什么？我不确定你的

adjustTable（）

方法应该做什么，或者你为什么需要正则表达式。您能不能不使用JavaScript来调整表的大小？jQuery和for循环遍历每个表数据，表大小是执行我尝试执行的操作的正确方法，强制执行表宽度。我刚开始的时候没有想到。而且，要匹配所有的东西，比如。在其他语言中，您必须使用排除中间法则[\s\s]，因为方括号中的“.”具有不同的含义，我在另一个线程中发现了这一点[。\n]'不好。但是，是的，正确的方法是在jQuery中，但是在tinyMCE中HTML更严格，所以它是可以做到的。使用[\S\S]，现在它可以工作（/^（[\S\S]*）（\u003Ctable[\S\S]*？\S*？\w*？width\u003D[\u0022\u0027]）（\d+px）（[\u0022\u0027][\S\S]*？\u003E）（[\S\S]*）$/img）

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