JavaScript正則表達式替換寬度屬性匹配

我正在使用RegEx來匹配textarea中較窄的TinyMCE HTML集。寬度太大，造成流失，所以我正在用JavaScript編寫測試代碼。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>

是的，我明白正則表達式和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像素，但隨後有表標籤，這是奇怪的後多餘的東西，因爲我覺得我是強迫在表標籤匹配。思考？

來源

2014-05-22 Jordan Jelinek

您可以完全拋棄正則表達式，並使用CSS替代寬度：'#myTable table {width：100％;}'EG：http：// jsfiddle。 net/L7DqU/ – Moob

你說你明白不要使用正則表達式，但是你仍想使用它們嗎？爲什麼？ –

我不確定你的'adjustTable（）'方法應該做什麼或爲什麼你需要RegEx。你不能只用JavaScript來調整表格大小嗎？ http://jsfiddle.net/3hLp7/ – Moob

讓我們通過登錄正則表達式的整個結果調試這樣的：

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]

來源

2014-05-22 16:26:05

我做到了這一點，也取代了。與[\ S \ s]，現在它工作（/ ^（[\ s \ S] *）（\ u003Ctable [\ s \ S] *？\ s *？\ w *？width \ u003D [\ u0022 \ u0027]）（\ d + PX）（[\ u0022 \ u0027] [\ S \ S] *？\ u003E）（[\ S \ S *）$ /張圖片） –

該點與JavaScript中的換行符不匹配。而且，由於您設置了/m修飾符，因此$也匹配行尾，而不僅僅是文件末尾。

因此，當你與$3更換比賽中您正則表達式最終(.*)不匹配任何東西，留下完整的字符串的其餘部分（其中包含1000px）。

查看它on regex101.com。

來源

2014-05-22 16:23:34

JavaScript正則表達式替換寬度屬性匹配

回答

相關問題