Currently, I am utilizing RegEx to target a more specific subset of TinyMCE HTML within a textarea. The widths are causing some overflow issues, so I am experimenting with some test code in JavaScript.
One thing that perplexes me is why $3 is not only capturing "1000px", but also includes everything following the table tag in the document?
<script language="javascript">
// adjust table width
function adjustTable(elem0, elem1) {
// for debugging purposes, display results in a 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>
While I comprehend that RegEx and HTML should not be mixed due to their intricacies, I am striving to render a printable subset of HTML.
I am confused by the multiple matches that are being returned.
Here is the resulting output for $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>
While it does capture "1000px", there seems to be extra content after the table tag, which is unexpected as I believed I was specifying a match within the table tag. Any thoughts on this?