JavaScript RegEx to remove html template section inside table row

Question

I have one HTML template - created from MSWord and I need to fill data into that template using JavaScript.
There are some form level mandatory fields and few optional sections as well.
For those sections if there won't be any data provided by user then I need to remove those entire sections from HTML template string using JavaScript. Entire HTML template form is table structured, so sections are also inside table row.

I have defined all sections with [!!SECTIONCODEstart!!] and [!!SECITONCODEend!!]
e.g.

...other html and css..'!!xstart!!' ... multi line content ... '!!xend!!'...other html...
...other html and css..'!!zstart!!' ... multi line content ... '!!zend!!'...other html...

I tried below code on mozilla regex guide to try few other regex as well with and wout '\r'.

var regex2 = new RegExp('\!\!mstart\!\!(.|\n\r*)+\!\!mend\!\!');
var data = 'some string !!mstart!!\n<tr style=\'mso-yfti-irow:6\'>\'$test$; <![if !supportMisalignedColumns]><tr height=0></tr><![endif]></table> </table>\n<p class=MsoNormal><o:p></o:p></p>\n</td>\n</tr>\n!!mend!! some extra string';

console.log(regex2);
console.log();
console.log(regex2.test(data));
console.log();
console.log(regex2.exec(data));
console.log();
console.log(data.replace(regex2,'*'));

Below is the section from my HTML template which I want to remove conditionally using RegEx:

!!mstart!!
 <tr style='mso-yfti-irow:6'>
  <td class="hidden" width="100%" colspan=6 valign=top style='width:100.0%;border:solid windowtext 1.0pt;
  border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
  background:#FBE4D5;mso-background-themecolor:accent2;mso-background-themetint:
  51;padding:.1in 0in 0in 0in'>
  <p class=MsoNormal style='margin-bottom:12.0pt;tab-stops:162.75pt'><span
  style='font-size:18.0pt;font-family:"Calibri Light",sans-serif;mso-ascii-theme-font:
  major-latin;mso-hansi-theme-font:major-latin;mso-bidi-theme-font:major-latin;
  color:black;mso-color-alt:windowtext'><span style='mso-spacerun:yes'>
  </span>Mailing Projects</span><span style='font-size:18.0pt;font-family:"Calibri Light",sans-serif;
  mso-ascii-theme-font:major-latin;mso-hansi-theme-font:major-latin;mso-bidi-theme-font:
  major-latin'><o:p></o:p></span></p>
  <table class=MsoTableGrid border=1 cellspacing=0 cellpadding=0 width="100%"
   style='border-collapse:collapse;mso-table-layout-alt:fixed;border:none;
   mso-border-alt:solid windowtext .5pt;mso-yfti-tbllook:1184;mso-padding-alt:
   .1in .1in .1in .1in'>
   <tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes'>
    <td width=227 colspan=2 valign=top style='width:169.9pt;border-top:solid windowtext 1.0pt;
    border-left:none;border-bottom:none;border-right:solid windowtext 1.0pt;
    mso-border-top-alt:solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <p class=MsoNormal>Postal Service:<o:p></o:p></p>
    </td>
    <td width=123 valign=top style='width:92.6pt;border-top:solid windowtext 1.0pt;
    border-left:none;border-bottom:none;border-right:solid windowtext 1.0pt;
    mso-border-left-alt:solid windowtext .5pt;mso-border-top-alt:solid windowtext .5pt;
    mso-border-left-alt:solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <p class=MsoNormal>Postage Paid by:<o:p></o:p></p>
    </td>
    <td width=345 colspan=2 valign=top style='width:258.8pt;border-top:solid windowtext 1.0pt;
    border-left:none;border-bottom:none;border-right:solid windowtext 1.0pt;
    mso-border-left-alt:solid windowtext .5pt;mso-border-top-alt:solid windowtext .5pt;
    mso-border-left-alt:solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <p class=MsoNormal>Package Components:<o:p></o:p></p>
    </td>
    <td width=345 colspan=3 valign=top style='width:258.85pt;border:none;
    border-top:solid windowtext 1.0pt;mso-border-left-alt:solid windowtext .5pt;
    mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <p class=MsoNormal>Package Dimensions (inches):<o:p></o:p></p>
    </td>
   </tr>
   <tr style='mso-yfti-irow:1'>
    <td width=227 colspan=2 valign=top style='width:169.9pt;border-top:none;
    border-left:none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
    mso-border-bottom-alt:solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <ul style='margin-top:0in' type=disc>
     <li class=MsoListParagraph style='margin-left:0in;mso-list:l1 level1 lfo2'>$PostalService$<o:p></o:p></li>
    </ul>
    </td>
    <td width=123 valign=top style='width:92.6pt;border-top:none;border-left:
    none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
    mso-border-left-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
    mso-border-bottom-alt:solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    $PostagePaidBy$
    </td>
    <td width=345 colspan=2 valign=top style='width:258.8pt;border-top:none;
    border-left:none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
    mso-border-left-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
    mso-border-bottom-alt:solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <p class=MsoNormal>$PackageComponents$<o:p></o:p></p>
    </td>
    <td width=345 colspan=3 valign=top style='width:258.85pt;border:none;
    border-bottom:solid windowtext 1.0pt;mso-border-left-alt:solid windowtext .5pt;
    mso-border-left-alt:solid windowtext .5pt;mso-border-bottom-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <p class=MsoNormal>$PackageDimensions$<o:p></o:p></p>
    </td>
   </tr>
   <tr style='mso-yfti-irow:2'>
    <td width=1040 colspan=8 valign=top style='width:780.15pt;border:none;
    border-bottom:solid windowtext 1.0pt;mso-border-top-alt:solid windowtext .5pt;
    mso-border-top-alt:solid windowtext .5pt;mso-border-bottom-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <p class=MsoNormal><b><span style='font-size:14.0pt;font-family:"Calibri Light",sans-serif;
    mso-ascii-theme-font:major-latin;mso-hansi-theme-font:major-latin;
    mso-bidi-theme-font:major-latin'>Package Detail<o:p></o:p></span></b></p>
    </td>
   </tr>
   <tr style='mso-yfti-irow:3'>
    <td width=173 valign=top style='width:129.45pt;border:none;border-right:
    solid windowtext 1.0pt;mso-border-top-alt:solid windowtext .5pt;mso-border-top-alt:
    solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <p class=MsoNormal>Package 1<o:p></o:p></p>
    </td>
    <td width=177 colspan=2 valign=top style='width:133.05pt;border:none;
    border-right:solid windowtext 1.0pt;mso-border-top-alt:solid windowtext .5pt;
    mso-border-left-alt:solid windowtext .5pt;mso-border-top-alt:solid windowtext .5pt;
    mso-border-left-alt:solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <p class=MsoNormal>Package 2<o:p></o:p></p>
    </td>
    <td width=173 valign=top style='width:129.4pt;border:none;border-right:
    solid windowtext 1.0pt;mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:
    solid windowtext .5pt;mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:
    solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <p class=MsoNormal>Package 3<o:p></o:p></p>
    </td>
    <td width=173 valign=top style='width:129.4pt;border:none;border-right:
    solid windowtext 1.0pt;mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:
    solid windowtext .5pt;mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:
    solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <p class=MsoNormal>Package 4<o:p></o:p></p>
    </td>
    <td width=173 colspan=2 valign=top style='width:129.4pt;border:none;
    border-right:solid windowtext 1.0pt;mso-border-top-alt:solid windowtext .5pt;
    mso-border-left-alt:solid windowtext .5pt;mso-border-top-alt:solid windowtext .5pt;
    mso-border-left-alt:solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <p class=MsoNormal>Package 5<o:p></o:p></p>
    </td>
    <td width=173 valign=top style='width:129.45pt;border:none;mso-border-top-alt:
    solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;padding:
    .1in .1in .1in .1in'>
    <p class=MsoNormal>Package 6<o:p></o:p></p>
    </td>
   </tr>
   <tr style='mso-yfti-irow:4'>
    <td width=173 valign=top style='width:129.45pt;border-top:none;border-left:
    none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
    mso-border-bottom-alt:solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <ul style='margin-top:0in' type=disc>
     $Package1$
    </ul>
    </td>
    <td width=177 colspan=2 valign=top style='width:133.05pt;border-top:none;
    border-left:none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
    mso-border-left-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
    mso-border-bottom-alt:solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <ul style='margin-top:0in' type=disc>
     $Package2$
    </ul>
    </td>
    <td width=173 valign=top style='width:129.4pt;border-top:none;border-left:
    none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
    mso-border-left-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
    mso-border-bottom-alt:solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <ul style='margin-top:0in' type=disc>
     $Package3$
    </ul>
    </td>
    <td width=173 valign=top style='width:129.4pt;border-top:none;border-left:
    none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
    mso-border-left-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
    mso-border-bottom-alt:solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <ul style='margin-top:0in' type=disc>
     $Package4$
    </ul>
    </td>
    <td width=173 colspan=2 valign=top style='width:129.4pt;border-top:none;
    border-left:none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
    mso-border-left-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
    mso-border-bottom-alt:solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <ul style='margin-top:0in' type=disc>
     $Package5$
    </ul>
    </td>
    <td width=173 valign=top style='width:129.45pt;border:none;border-bottom:
    solid windowtext 1.0pt;mso-border-left-alt:solid windowtext .5pt;
    mso-border-left-alt:solid windowtext .5pt;mso-border-bottom-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <ul style='margin-top:0in' type=disc>
     $Package6$
    </ul>
    </td>
   </tr>
   <tr style='mso-yfti-irow:5'>
    <td width=173 valign=top style='width:129.45pt;border:none;border-right:
    solid windowtext 1.0pt;mso-border-top-alt:solid windowtext .5pt;mso-border-top-alt:
    solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <p class=MsoNormal>Package Weight <span style='font-size:8.0pt'>(estimated)</span>:<o:p></o:p></p>
    </td>
    <td width=177 colspan=2 valign=top style='width:133.05pt;border:none;
    border-right:solid windowtext 1.0pt;mso-border-top-alt:solid windowtext .5pt;
    mso-border-left-alt:solid windowtext .5pt;mso-border-top-alt:solid windowtext .5pt;
    mso-border-left-alt:solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <p class=MsoNormal>Data Work Required:<o:p></o:p></p>
    </td>
    <td width=173 valign=top style='width:129.4pt;border:none;border-right:
    solid windowtext 1.0pt;mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:
    solid windowtext .5pt;mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:
    solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <p class=MsoNormal>Operations Required:<o:p></o:p></p>
    </td>
    <td width=259 colspan=2 valign=top style='width:194.1pt;border:none;
    border-right:solid windowtext 1.0pt;mso-border-top-alt:solid windowtext .5pt;
    mso-border-left-alt:solid windowtext .5pt;mso-border-top-alt:solid windowtext .5pt;
    mso-border-left-alt:solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <p class=MsoNormal>Mailing Instructions:<o:p></o:p></p>
    </td>
    <td width=259 colspan=2 valign=top style='width:194.15pt;border:none;
    mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <p class=MsoNormal>Additional Comments:<o:p></o:p></p>
    </td>
   </tr>
   <tr style='mso-yfti-irow:6;mso-yfti-lastrow:yes'>
    <td width=173 valign=top style='width:129.45pt;border:none;border-right:
    solid windowtext 1.0pt;mso-border-right-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <p class=MsoNormal>$WeightOfPackage$<o:p></o:p></p>
    </td>
    <td width=177 colspan=2 valign=top style='width:133.05pt;border:none;
    border-right:solid windowtext 1.0pt;mso-border-left-alt:solid windowtext .5pt;
    mso-border-left-alt:solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    $RequiredDataWork$
    </td>
    <td width=173 valign=top style='width:129.4pt;border:none;border-right:
    solid windowtext 1.0pt;mso-border-left-alt:solid windowtext .5pt;
    mso-border-left-alt:solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <p class=MsoNormal>$OperationsRequired$<o:p></o:p></p>
    </td>
    <td width=259 colspan=2 valign=top style='width:194.1pt;border:none;
    border-right:solid windowtext 1.0pt;mso-border-left-alt:solid windowtext .5pt;
    mso-border-left-alt:solid windowtext .5pt;mso-border-right-alt:solid windowtext .5pt;
    padding:.1in .1in .1in .1in'>
    <p class=MsoNormal>$SpecialMailingInstructions$<o:p></o:p></p>
    </td>
    <td width=259 colspan=2 valign=top style='width:194.15pt;border:none;
    mso-border-left-alt:solid windowtext .5pt;padding:.1in .1in .1in .1in'>
    <p class=MsoNormal>$MailAdditionalComments$<o:p></o:p></p>
    </td>
   </tr>
   <![if !supportMisalignedColumns]>
   <tr height=0>
    <td width=162 style='border:none'></td>
    <td width=32 style='border:none'></td>
    <td width=123 style='border:none'></td>
    <td width=159 style='border:none'></td>
    <td width=146 style='border:none'></td>
    <td width=86 style='border:none'></td>
    <td width=60 style='border:none'></td>
    <td width=151 style='border:none'></td>
   </tr>
   <![endif]>
  </table>
  <p class=MsoNormal><o:p></o:p></p>
  </td>
 </tr>
!!mend!!

But above RegEx is not working in my code. I stored entire HTML template content in a JavaScript variable and tried to execute regex on that. So, finally when I replaced single quotes to double quotes and removed all new line characters for that section the regex is surprisingly working! Am I doing something wrong? I tried like below which does not work:

var emailContent = 'All content read from HTML template.';
let sectionRegEx = new RegExp('\!\!mstart\!\!(.|\n\r*)+\!\!mend\!\!');
console.log('Section Target => ' + sectionRegEx.test(emailContent) + sectionRegEx.exec(emailContent));

Is there any other solution for my problem? Either RegEx or how should I manage sections in the HTML template? (Its large HTML file to be emailed and read in outlook with 100+ fields. 50+ fields in multiple sections to set conditional visibility.)

Thanks.

Use `/!!mstart!!([\S\s]*?)!!mend!!/` and ignore everything else, answers duplicates, everything. — , Nov 14 '19 at 22:04
Don't be sorry, it works https://regex101.com/r/yFLy31/1, https://regex101.com/r/nUhVZo/1, https://regex101.com/r/wHnlAH/1, https://regex101.com/r/UVWYFE/1 — , Nov 14 '19 at 22:22
A word of caution, old browsers do not support the _`dot-all`_ modifier `/../s` which makes the dot metachar match line breaks. If supporting old browsers the dot has to be replaced with something like `[\S\s]` or `[\W\w]` which will match any character. Also, something like `!!mstart!!(.*)!!mend!!` is not correct in the sense it will only ever find 1 match (if at all) since it greedily matches to the very last `||mend||`, consuming other start / ends along the way. — , Nov 14 '19 at 22:53

mplungjan · Accepted Answer · 2019-11-14T22:31:18.857

0

How about

let sectionRegEx = new RegExp('!!mstart!!(.*)!!mend!!','gms')

which is equivalent to

let sectionRegEx = /!!mstart!!(.*)!!mend!!/gms

https://regex101.com/r/fwhwNk/1

!!mstart!! matches the characters !!mstart!! literally (case sensitive)
1st Capturing Group (.*)
- .* matches any character
- Quantifier — Matches between zero and unlimited times, as many times as possible, giving back as needed (greedy)
!!mend!! matches the characters !!mend!! literally (case sensitive)

Global pattern flags

g modifier: global. All matches (don't return after first match)
m modifier: multi line. Causes ^ and $ to match the begin/end of each line* (not only begin/end of string)
s modifier: single line. Dot matches newline characters (draft)

edited Nov 14 '19 at 22:31

answered Nov 14 '19 at 19:48

mplungjan

169,008
28
173
236

I cannot read this unformatted comment. Update your question please – mplungjan Nov 14 '19 at 21:17
I updated the questions with attempts suggested by you. I am surprised that its working on regex101 website like it should but not from the string that I read from a template file. And sorry, could not upvote your answer due to low points in my account. Thnx though. – Nov 14 '19 at 22:18
1

`new RegExp('\/!!mstart!!(.*)!!mend!!/gms');` is not a valid regex. try `const re = /!!mstart!!(.*)!!mend!!/gms` – mplungjan Nov 14 '19 at 22:26
1

or `new RegExp('!!mstart!!(.*)!!mend!!','gms')` – mplungjan Nov 14 '19 at 22:27
1

Thanks for the correction @mplungjan it works. – Nov 14 '19 at 22:38

JavaScript RegEx to remove html template section inside table row

1 Answers1