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

【问题标题】：JavaScript Regex Replace Width Attribute MatchingJavaScript 正则表达式替换宽度属性匹配
【发布时间】：2014-05-23 00:26:05
【问题描述】：

我正在使用 RegEx 匹配来自文本区域的一组更窄的 TinyMCE HTML。宽度太大了，会产生偏差，所以我在 JavaScript 中编写测试代码。

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

是的，我确实理解 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 标签中强制匹配。想法？

【问题讨论】：

您可以完全放弃正则表达式并使用 CSS 覆盖宽度：#myTable table {width:100%;} EG：jsfiddle.net/L7DqU
你说你明白不使用正则表达式但你还是想使用它们？为什么？
我不确定您的 adjustTable() 方法应该做什么或为什么需要 RegEx。你不能只使用 JavaScript 来调整表格的大小吗？ jsfiddle.net/3hLp7
jQuery 和 for 循环遍历每个表数据，表大小是执行我想做的事情的正确方法，强制表宽度。我刚开始的时候没有想到。此外，要匹配像 .在其他语言中，您必须使用排中律 [\s\S] 因为 '.'方括号中的含义不同，我在另一个线程中找到了。 '[.\n]' 不好。但是，是的，正确的做法是在 jQuery 中，但在 tinyMCE 中，HTML 更严格，所以它是可行的。

标签： javascript regex replace

【解决方案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]

【讨论】：

我这样做了，还替换了 .与 [\S\s]，现在它可以工作 (/^([\s\S]*)(\u003Ctable[\s\S]*?\s*?\w*?width\u003D[\u0022\ u0027])(\d+px)([\u0022\u0027][\s\S]*?\u003E)([\s\S]*)$/img)

【解决方案2】：

点与 JavaScript 中的换行符不匹配。而且由于您设置了/m 修饰符，$ 也匹配行尾，而不仅仅是文件末尾。

因此，正则表达式中的最后一个 (.*) 不匹配任何内容，当您将匹配项替换为 $3（其中包含 1000px）时，字符串的其余部分保持不变。

看on regex101.com。

【讨论】：