前端之家

  1. 首页
  2. 问答

JavaScript RegEx删除表格行内的html模板部分

• 问答

我有一个HTML模板-由MSWord创建，我需要使用JavaScript将数据填充到该模板中。
有一些表单级别的必填字段，而可选部分也很少。
对于这些部分，如果用户没有提供任何数据，那么我需要使用JavaScript从HTML模板字符串中删除整个部分。 整个HTML模板表单都是表结构的，因此部分也位于表行内。

我用 [!! SECTIONCODEstart !!]和[!! SECITONCODEend !!]
定义了所有部分 例如

  1. ...其他html和css ..'!! xstart !!' ...多行内容...'!! xend !!'...其他html ...
  2. ...其他HTML和CSS ..'!! zstart !!' ...多行内容...'!! zend！'...其他html ...

我尝试在mozilla regex guide上的以下代码中尝试其他一些正则表达式，并且都用'\ 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,'*'));

下面是我想使用RegEx有条件删除的HTML模板部分：

!!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!!

但是RegEx在我的代码中不起作用。 我将整个HTML模板内容存储在JavaScript变量中，并尝试对此执行regex。 因此，最后，当我将单引号替换为双引号并删除该部分的所有换行符时，正则表达式令人惊讶地起作用！ 难道我做错了什么？ 我尝试如下所示，但不起作用：

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));

我的问题还有其他解决方案吗？ RegEx还是我应该如何管理HTML模板中的部分？ （它的大型HTML文件通过电子邮件发送并在Outlook中读取，其中包含100多个字段。多个区域中的50多个字段可设置条件可见性。）

谢谢。

achenoffice82 回答：JavaScript RegEx删除表格行内的html模板部分

怎么样

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

等效于

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

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

  • !! mstart !!匹配字符！从字面上看（区分大小写）

  • 第一捕获组（。*）

    • 。*匹配任何字符
    • 数量词-尽可能在零到无限次之间进行匹配，并根据需要进行返回（贪婪）

  • !!补上!!匹配字符！从字面上看（区分大小写）

全局模式标志

  • g修饰符：全局。所有比赛（第一次比赛后不返回）
  • m修饰符：多行。导致^和$匹配每行的开头/结尾*（不仅是字符串的开头/结尾）
  • s修饰符：单行。点匹配换行符（草稿）
htmljavascriptnewlineregex
本文链接：https://www.f2er.com/3099715.html

大家都在问