Angular 4/ Typescript - 如何使用 Typescript 编辑 HTML 文件

【问题标题】：Angular 4/ Typescript - How to edit an HTML file with TypescriptAngular 4/ Typescript - 如何使用 Typescript 编辑 HTML 文件
【发布时间】：2018-02-02 18:38:51
【问题描述】：

我希望能够从一个函数编辑这个 HTML 页面，我可以传入 2 个字符串来编辑带有dashboardName 的超文本链接，以及它使用dashboardDisplayName 的地方。

我似乎找不到任何关于能够调用 html 文件并对其进行编辑的内容。我希望能够根据 Typescript 中 getEmailHtml() 函数的输入来更改我所描述的 html 文件。然后，我希望能够获取编辑 HTML 的内容并将其设置为字符串。

如果有人对此问题有任何了解，我将非常感谢任何帮助！

我希望编辑的 Angular Typescript 文件函数

import { Injectable } from '@angular/core';

/**
 * @description service for notifications
 */
@Injectable()
export class NotificationService {

    constructor() {}

    /**
     * @description gets the default HTML email message to be sent
     * uses Display Name for text in the Email and dashboardName for hyperlink to userdashboard
     * @param {string} dashboardName
     * @param {string} dashboardDisplayName
     */
    getEmailHtml(dashboardName: string, dashboardDisplayName: string): void {

    }
}

我要编辑的 HTML 文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <!--[if gte mso 9]><xml>
     <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelsPerInch>96</o:PixelsPerInch>
     </o:OfficeDocumentSettings>
    </xml><![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width">
    <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
    <title>BF-basic-onecolumn</title>


    <style type="text/css" id="media-query">
        body {
            margin: 0;
            padding: 0;
        }

        table, tr, td {
            vertical-align: top;
            border-collapse: collapse;
        }

        .ie-browser table, .mso-container table {
            table-layout: fixed;
        }

        * {
            line-height: inherit;
        }

        a[x-apple-data-detectors=true] {
            color: inherit !important;
            text-decoration: none !important;
        }

        [owa] .img-container div, [owa] .img-container button {
            display: block !important;
        }

        [owa] .fullwidth button {
            width: 100% !important;
        }

        [owa] .block-grid .col {
            display: table-cell;
            float: none !important;
            vertical-align: top;
        }

        .ie-browser .num12, .ie-browser .block-grid, [owa] .num12, [owa] .block-grid {
            width: 500px !important;
        }

        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
            line-height: 100%;
        }

        .ie-browser .mixed-two-up .num4, [owa] .mixed-two-up .num4 {
            width: 164px !important;
        }

        .ie-browser .mixed-two-up .num8, [owa] .mixed-two-up .num8 {
            width: 328px !important;
        }

        .ie-browser .block-grid.two-up .col, [owa] .block-grid.two-up .col {
            width: 250px !important;
        }

        .ie-browser .block-grid.three-up .col, [owa] .block-grid.three-up .col {
            width: 166px !important;
        }

        .ie-browser .block-grid.four-up .col, [owa] .block-grid.four-up .col {
            width: 125px !important;
        }

        .ie-browser .block-grid.five-up .col, [owa] .block-grid.five-up .col {
            width: 100px !important;
        }

        .ie-browser .block-grid.six-up .col, [owa] .block-grid.six-up .col {
            width: 83px !important;
        }

        .ie-browser .block-grid.seven-up .col, [owa] .block-grid.seven-up .col {
            width: 71px !important;
        }

        .ie-browser .block-grid.eight-up .col, [owa] .block-grid.eight-up .col {
            width: 62px !important;
        }

        .ie-browser .block-grid.nine-up .col, [owa] .block-grid.nine-up .col {
            width: 55px !important;
        }

        .ie-browser .block-grid.ten-up .col, [owa] .block-grid.ten-up .col {
            width: 50px !important;
        }

        .ie-browser .block-grid.eleven-up .col, [owa] .block-grid.eleven-up .col {
            width: 45px !important;
        }

        .ie-browser .block-grid.twelve-up .col, [owa] .block-grid.twelve-up .col {
            width: 41px !important;
        }

        @media only screen and (min-width: 520px) {
            .block-grid {
                width: 500px !important;
            }

                .block-grid .col {
                    display: table-cell;
                    Float: none !important;
                    vertical-align: top;
                }

                    .block-grid .col.num12 {
                        width: 500px !important;
                    }

                .block-grid.mixed-two-up .col.num4 {
                    width: 164px !important;
                }

                .block-grid.mixed-two-up .col.num8 {
                    width: 328px !important;
                }

                .block-grid.two-up .col {
                    width: 250px !important;
                }

                .block-grid.three-up .col {
                    width: 166px !important;
                }

                .block-grid.four-up .col {
                    width: 125px !important;
                }

                .block-grid.five-up .col {
                    width: 100px !important;
                }

                .block-grid.six-up .col {
                    width: 83px !important;
                }

                .block-grid.seven-up .col {
                    width: 71px !important;
                }

                .block-grid.eight-up .col {
                    width: 62px !important;
                }

                .block-grid.nine-up .col {
                    width: 55px !important;
                }

                .block-grid.ten-up .col {
                    width: 50px !important;
                }

                .block-grid.eleven-up .col {
                    width: 45px !important;
                }

                .block-grid.twelve-up .col {
                    width: 41px !important;
                }
        }

        @media (max-width: 520px) {
            .block-grid, .col {
                min-width: 320px !important;
                max-width: 100% !important;
            }

            .block-grid {
                width: calc(100% - 40px) !important;
            }

            .col {
                width: 100% !important;
            }

                .col > div {
                    margin: 0 auto;
                }

            img.fullwidth {
                max-width: 100% !important;
            }
        }
    </style>
</head>
    <body class="clean-body" style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;background-color: #FFFFFF">
        <!--[if IE]><div class="ie-browser"><![endif]-->
        <!--[if mso]><div class="mso-container"><![endif]-->
        <div class="nl-container" style="min-width: 320px;Margin: 0 auto;background-color: #FFFFFF">
            <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center" style="background-color: #FFFFFF;"><![endif]-->
            <div style="background-color:#D9D9D9;">
                <div style="Margin: 0 auto;min-width: 320px;max-width: 500px;width: 500px;width: calc(19000% - 98300px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;" class="block-grid ">
                    <div style="border-collapse: collapse;display: table;width: 100%;">
                        <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="background-color:#D9D9D9;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width: 500px;"><tr class="layout-full-width" style="background-color:transparent;"><![endif]-->
                        <!--[if (mso)|(IE)]><td align="center" width="500" style=" width:500px; padding-right: 20px; padding-left: 20px; padding-top:20px; padding-bottom:20px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><![endif]-->
                        <div class="col num12" style="min-width: 320px;max-width: 500px;width: 500px;width: calc(18000% - 89500px);background-color: transparent;">
                            <div style="background-color: transparent; width: 100% !important;">
                                <!--[if (!mso)&(!IE)]><!--><div style="border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:20px; padding-bottom:20px; padding-right: 20px; padding-left: 20px;">
                                    <!--<![endif]-->
                                    <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 0px; padding-bottom: 0px;"><![endif]-->
                                    <div style="color:#555555;line-height:120%;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; padding-right: 10px; padding-left: 10px; padding-top: 0px; padding-bottom: 0px;">
                                        <div style="font-size:12px;line-height:14px;color:#555555;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;text-align:left;"><p style="margin: 0;font-size: 18px;line-height: 22px;text-align: center"><span style="font-size: 24px; line-height: 28px;"><strong><span style="line-height: 28px; font-size: 24px;">Notification from&#160;&lt;DashboardName&gt;</span></strong></span></p></div>
                                    </div>
                                    <!--[if mso]></td></tr></table><![endif]-->
                                    <!--[if (!mso)&(!IE)]><!-->
                                </div><!--<![endif]-->
                            </div>
                        </div>
                        <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
                    </div>
                </div>
            </div>    <div style="background-color:transparent;">
                <div style="Margin: 0 auto;min-width: 320px;max-width: 500px;width: 500px;width: calc(19000% - 98300px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;" class="block-grid ">
                    <div style="border-collapse: collapse;display: table;width: 100%;">
                        <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="background-color:transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width: 500px;"><tr class="layout-full-width" style="background-color:transparent;"><![endif]-->
                        <!--[if (mso)|(IE)]><td align="center" width="500" style=" width:500px; padding-right: 0px; padding-left: 0px; padding-top:30px; padding-bottom:30px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><![endif]-->
                        <div class="col num12" style="min-width: 320px;max-width: 500px;width: 500px;width: calc(18000% - 89500px);background-color: transparent;">
                            <div style="background-color: transparent; width: 100% !important;">
                                <!--[if (!mso)&(!IE)]><!--><div style="border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:30px; padding-bottom:30px; padding-right: 0px; padding-left: 0px;">
                                    <!--<![endif]-->
                                    <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 5px; padding-bottom: 10px;"><![endif]-->
                                    <div style="color:#aaaaaa;line-height:120%;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; padding-right: 10px; padding-left: 10px; padding-top: 5px; padding-bottom: 10px;">
                                        <div style="font-size:12px;line-height:14px;color:#aaaaaa;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;text-align:left;"><p style="margin: 0;font-size: 12px;line-height: 14px;text-align: center"><span style="font-size: 16px; line-height: 19px; color: rgb(0, 0, 0);">Dashboard: &lt;DashboardName&gt; has been updated. </span></p><p style="margin: 0;font-size: 16px;line-height: 19px;text-align: center"><a style="color:#0000FF;color:#0000FF;text-decoration: underline;" href="http://localhost:8080/DashboardConsole/ownerManyFields" target="_blank" rel="noopener noreferrer">Click here to view the updated Dashboard</a></p></div>
                                    </div>
                                    <!--[if mso]></td></tr></table><![endif]-->
                                    <!--[if (!mso)&(!IE)]><!-->
                                </div><!--<![endif]-->
                            </div>
                        </div>
                        <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
                    </div>
                </div>
            </div>    <div style="background-color:#444444;">
                <div style="Margin: 0 auto;min-width: 320px;max-width: 500px;width: 500px;width: calc(19000% - 98300px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;" class="block-grid ">
                    <div style="border-collapse: collapse;display: table;width: 100%;">
                        <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="background-color:#444444;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width: 500px;"><tr class="layout-full-width" style="background-color:transparent;"><![endif]-->
                        <!--[if (mso)|(IE)]><td align="center" width="500" style=" width:500px; padding-right: 0px; padding-left: 0px; padding-top:10px; padding-bottom:10px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><![endif]-->
                        <div class="col num12" style="min-width: 320px;max-width: 500px;width: 500px;width: calc(18000% - 89500px);background-color: transparent;">
                            <div style="background-color: transparent; width: 100% !important;">
                                <!--[if (!mso)&(!IE)]><!--><div style="border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:10px; padding-bottom:10px; padding-right: 0px; padding-left: 0px;">
                                    <!--<![endif]-->


                                    <div align="center" class="button-container center" style="padding-right: 10px; padding-left: 10px; padding-top:10px; padding-bottom:10px;">
                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top:10px; padding-bottom:10px;" align="center"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:42px; v-text-anchor:middle; width:212px;" arcsize="10%" strokecolor="#3AAEE0" fillcolor="#3AAEE0"><w:anchorlock/><center style="color:#ffffff; font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size:16px;"><![endif]-->
                                        <div style="color: #ffffff; background-color: #3AAEE0; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; max-width: 192px; width: 152px; width: auto; border-top: 0px solid transparent; border-right: 0px solid transparent; border-bottom: 0px solid transparent; border-left: 0px solid transparent; padding-top: 5px; padding-right: 20px; padding-bottom: 5px; padding-left: 20px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; text-align: center; mso-border-alt: none;">
                                            <span style="font-size:16px;line-height:32px;"><span style="font-size: 12px; line-height: 24px;" data-mce-style="font-size: 12px;"><strong><span style="line-height: 24px; font-size: 12px;" data-mce-style="line-height: 24px;">Click here to unsubscribe</span></strong></span></span>
                                        </div>
                                        <!--[if mso]></center></v:roundrect></td></tr></table><![endif]-->
                                    </div>

                                    <!--[if (!mso)&(!IE)]><!-->
                                </div><!--<![endif]-->
                            </div>
                        </div>
                        <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
                    </div>
                </div>
            </div>   <!--[if (mso)|(IE)]></td></tr></table><![endif]-->
        </div>
        <!--[if (mso)|(IE)]></div><![endif]-->
    </body>
</html>

【问题讨论】：

  • 所以你只需要在 HTML 中做一个字符串替换？或者您是否还允许用户对此 HTML 进行编辑？
  • 只是在 3 个位置替换字符串，其中有 和要替换的 href 位置，当前显示“ownerManyFields”
  • 这将自动完成，然后被解析成一个字符串到一个文本区域供用户使用或编辑
  • 你使用了错误的方法，你不需要替换，但你可以在你的组件上保留变量并将它们绑定到 html 上，其余的会自动处理

标签： javascript html css angular typescript


【解决方案1】：

您可以使用此处详述的 JavaScript 替换功能替换任何字符串中的文本：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

类似这样的：

let yourNewString = yourHTMLString.replace('/<DashboardName>/g', dashboardName);

或

let text = '<DashboardName>';
let yourNewString = yourHTMLString.replace(new RegExp(text, 'g'), dashboardName);

添加“g”提供全局搜索/替换。

【讨论】：

  • 我将如何引用 html 文件（名为 default.email.html）我从来没有在 Angular 中以这种方式使用过 HTML 文件，仅在组件或对话框中，所以我不确定什么是最好的方法在这种情况下。
  • 我认为它会被视为您代码中某处定义的字符串。如果它真的需要是您从某个地方提取的外部文件，那么我不知道。
【解决方案2】：

感谢 DeborahK，我设法让它按我想要的方式工作！

下面的工作文件

import { Injectable } from '@angular/core';

/**
 * @description service for notifications
 */
@Injectable()
export class DefaultEmailService {

    setHtml: string;
    defaultEmailHtml: string = 
`
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
    <head>
        <!--[if gte mso 9]><xml>
         <o:OfficeDocumentSettings>
          <o:AllowPNG/>
          <o:PixelsPerInch>96</o:PixelsPerInch>
         </o:OfficeDocumentSettings>
        </xml><![endif]-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width">
        <!--[if !mso]><!-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
        <title>BF-basic-onecolumn</title>


        <style type="text/css" id="media-query">
            body {
                margin: 0;
                padding: 0;
            }

            table, tr, td {
                vertical-align: top;
                border-collapse: collapse;
            }

            .ie-browser table, .mso-container table {
                table-layout: fixed;
            }

            * {
                line-height: inherit;
            }

            a[x-apple-data-detectors=true] {
                color: inherit !important;
                text-decoration: none !important;
            }

            [owa] .img-container div, [owa] .img-container button {
                display: block !important;
            }

            [owa] .fullwidth button {
                width: 100% !important;
            }

            [owa] .block-grid .col {
                display: table-cell;
                float: none !important;
                vertical-align: top;
            }

            .ie-browser .num12, .ie-browser .block-grid, [owa] .num12, [owa] .block-grid {
                width: 500px !important;
            }

            .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
                line-height: 100%;
            }

            .ie-browser .mixed-two-up .num4, [owa] .mixed-two-up .num4 {
                width: 164px !important;
            }

            .ie-browser .mixed-two-up .num8, [owa] .mixed-two-up .num8 {
                width: 328px !important;
            }

            .ie-browser .block-grid.two-up .col, [owa] .block-grid.two-up .col {
                width: 250px !important;
            }

            .ie-browser .block-grid.three-up .col, [owa] .block-grid.three-up .col {
                width: 166px !important;
            }

            .ie-browser .block-grid.four-up .col, [owa] .block-grid.four-up .col {
                width: 125px !important;
            }

            .ie-browser .block-grid.five-up .col, [owa] .block-grid.five-up .col {
                width: 100px !important;
            }

            .ie-browser .block-grid.six-up .col, [owa] .block-grid.six-up .col {
                width: 83px !important;
            }

            .ie-browser .block-grid.seven-up .col, [owa] .block-grid.seven-up .col {
                width: 71px !important;
            }

            .ie-browser .block-grid.eight-up .col, [owa] .block-grid.eight-up .col {
                width: 62px !important;
            }

            .ie-browser .block-grid.nine-up .col, [owa] .block-grid.nine-up .col {
                width: 55px !important;
            }

            .ie-browser .block-grid.ten-up .col, [owa] .block-grid.ten-up .col {
                width: 50px !important;
            }

            .ie-browser .block-grid.eleven-up .col, [owa] .block-grid.eleven-up .col {
                width: 45px !important;
            }

            .ie-browser .block-grid.twelve-up .col, [owa] .block-grid.twelve-up .col {
                width: 41px !important;
            }

            @media only screen and (min-width: 520px) {
                .block-grid {
                    width: 500px !important;
                }

                    .block-grid .col {
                        display: table-cell;
                        Float: none !important;
                        vertical-align: top;
                    }

                        .block-grid .col.num12 {
                            width: 500px !important;
                        }

                    .block-grid.mixed-two-up .col.num4 {
                        width: 164px !important;
                    }

                    .block-grid.mixed-two-up .col.num8 {
                        width: 328px !important;
                    }

                    .block-grid.two-up .col {
                        width: 250px !important;
                    }

                    .block-grid.three-up .col {
                        width: 166px !important;
                    }

                    .block-grid.four-up .col {
                        width: 125px !important;
                    }

                    .block-grid.five-up .col {
                        width: 100px !important;
                    }

                    .block-grid.six-up .col {
                        width: 83px !important;
                    }

                    .block-grid.seven-up .col {
                        width: 71px !important;
                    }

                    .block-grid.eight-up .col {
                        width: 62px !important;
                    }

                    .block-grid.nine-up .col {
                        width: 55px !important;
                    }

                    .block-grid.ten-up .col {
                        width: 50px !important;
                    }

                    .block-grid.eleven-up .col {
                        width: 45px !important;
                    }

                    .block-grid.twelve-up .col {
                        width: 41px !important;
                    }
            }

            @media (max-width: 520px) {
                .block-grid, .col {
                    min-width: 320px !important;
                    max-width: 100% !important;
                }

                .block-grid {
                    width: calc(100% - 40px) !important;
                }

                .col {
                    width: 100% !important;
                }

                    .col > div {
                        margin: 0 auto;
                    }

                img.fullwidth {
                    max-width: 100% !important;
                }
            }
        </style>
    </head>
    <body class="clean-body" style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;background-color: #FFFFFF">
        <!--[if IE]><div class="ie-browser"><![endif]-->
        <!--[if mso]><div class="mso-container"><![endif]-->
        <div class="nl-container" style="min-width: 320px;Margin: 0 auto;background-color: #FFFFFF">
            <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center" style="background-color: #FFFFFF;"><![endif]-->
            <div style="background-color:#D9D9D9;">
                <div style="Margin: 0 auto;min-width: 320px;max-width: 500px;width: 500px;width: calc(19000% - 98300px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;" class="block-grid ">
                    <div style="border-collapse: collapse;display: table;width: 100%;">
                        <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="background-color:#D9D9D9;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width: 500px;"><tr class="layout-full-width" style="background-color:transparent;"><![endif]-->
                        <!--[if (mso)|(IE)]><td align="center" width="500" style=" width:500px; padding-right: 20px; padding-left: 20px; padding-top:20px; padding-bottom:20px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><![endif]-->
                        <div class="col num12" style="min-width: 320px;max-width: 500px;width: 500px;width: calc(18000% - 89500px);background-color: transparent;">
                            <div style="background-color: transparent; width: 100% !important;">
                                <!--[if (!mso)&(!IE)]><!--><div style="border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:20px; padding-bottom:20px; padding-right: 20px; padding-left: 20px;">
                                    <!--<![endif]-->
                                    <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 0px; padding-bottom: 0px;"><![endif]-->
                                    <div style="color:#555555;line-height:120%;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; padding-right: 10px; padding-left: 10px; padding-top: 0px; padding-bottom: 0px;">
                                        <div style="font-size:12px;line-height:14px;color:#555555;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;text-align:left;"><p style="margin: 0;font-size: 18px;line-height: 22px;text-align: center"><span style="font-size: 24px; line-height: 28px;"><strong><span style="line-height: 28px; font-size: 24px;">Notification from ReplaceDashboardName</span></strong></span></p></div>
                                    </div>
                                    <!--[if mso]></td></tr></table><![endif]-->
                                    <!--[if (!mso)&(!IE)]><!-->
                                </div><!--<![endif]-->
                            </div>
                        </div>
                        <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
                    </div>
                </div>
            </div>    <div style="background-color:transparent;">
                <div style="Margin: 0 auto;min-width: 320px;max-width: 500px;width: 500px;width: calc(19000% - 98300px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;" class="block-grid ">
                    <div style="border-collapse: collapse;display: table;width: 100%;">
                        <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="background-color:transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width: 500px;"><tr class="layout-full-width" style="background-color:transparent;"><![endif]-->
                        <!--[if (mso)|(IE)]><td align="center" width="500" style=" width:500px; padding-right: 0px; padding-left: 0px; padding-top:30px; padding-bottom:30px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><![endif]-->
                        <div class="col num12" style="min-width: 320px;max-width: 500px;width: 500px;width: calc(18000% - 89500px);background-color: transparent;">
                            <div style="background-color: transparent; width: 100% !important;">
                                <!--[if (!mso)&(!IE)]><!--><div style="border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:30px; padding-bottom:30px; padding-right: 0px; padding-left: 0px;">
                                    <!--<![endif]-->
                                    <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top: 5px; padding-bottom: 10px;"><![endif]-->
                                    <div style="color:#aaaaaa;line-height:120%;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; padding-right: 10px; padding-left: 10px; padding-top: 5px; padding-bottom: 10px;">
                                        <div style="font-size:12px;line-height:14px;color:#aaaaaa;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;text-align:left;">
                                        <p style="margin: 0;font-size: 12px;line-height: 14px;text-align: center">
                                        <span style="font-size: 16px; line-height: 19px; color: rgb(0, 0, 0);">Dashboard: ReplaceDashboardName has been updated. </span>
                                        </p><p style="margin: 0;font-size: 16px;line-height: 19px;text-align: center">
                                        <a style="color:#0000FF;color:#0000FF;text-decoration: underline;" ReplaceHrefToUserDashboard target="_blank" rel="noopener noreferrer">Click here to view the updated Dashboard</a></p></div>
                                    </div>
                                    <!--[if mso]></td></tr></table><![endif]-->
                                    <!--[if (!mso)&(!IE)]><!-->
                                </div><!--<![endif]-->
                            </div>
                        </div>
                        <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
                    </div>
                </div>
            </div>    <div style="background-color:#444444;">
                <div style="Margin: 0 auto;min-width: 320px;max-width: 500px;width: 500px;width: calc(19000% - 98300px);overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;" class="block-grid ">
                    <div style="border-collapse: collapse;display: table;width: 100%;">
                        <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="background-color:#444444;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width: 500px;"><tr class="layout-full-width" style="background-color:transparent;"><![endif]-->
                        <!--[if (mso)|(IE)]><td align="center" width="500" style=" width:500px; padding-right: 0px; padding-left: 0px; padding-top:10px; padding-bottom:10px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><![endif]-->
                        <div class="col num12" style="min-width: 320px;max-width: 500px;width: 500px;width: calc(18000% - 89500px);background-color: transparent;">
                            <div style="background-color: transparent; width: 100% !important;">
                                <!--[if (!mso)&(!IE)]><!--><div style="border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:10px; padding-bottom:10px; padding-right: 0px; padding-left: 0px;">
                                    <!--<![endif]-->


                                    <div align="center" class="button-container center" style="padding-right: 10px; padding-left: 10px; padding-top:10px; padding-bottom:10px;">
                                        <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"><tr><td style="padding-right: 10px; padding-left: 10px; padding-top:10px; padding-bottom:10px;" align="center">
                                        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:42px; v-text-anchor:middle; width:212px;" arcsize="10%" strokecolor="#3AAEE0" fillcolor="#3AAEE0">
                                        <w:anchorlock/><center style="color:#ffffff; font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size:16px;"><![endif]-->
                                        <div style="color: #ffffff; background-color: #3AAEE0; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; max-width: 192px; width: 152px; width: auto; border-top: 0px solid transparent; border-right: 0px solid transparent; border-bottom: 0px solid transparent; border-left: 0px solid transparent; padding-top: 5px; padding-right: 20px; padding-bottom: 5px; padding-left: 20px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; text-align: center; mso-border-alt: none;">
                                            <span style="font-size:16px;line-height:32px;"><span style="font-size: 12px; line-height: 24px;" data-mce-style="font-size: 12px;">
                                                <strong><span style="line-height: 24px; font-size: 12px;" data-mce-style="line-height: 24px;">Click here to unsubscribe</span></strong></span></span>
                                        </div>
                                        <!--[if mso]></center></v:roundrect></td></tr></table><![endif]-->
                                    </div>

                                    <!--[if (!mso)&(!IE)]><!-->
                                </div><!--<![endif]-->
                            </div>
                        </div>
                        <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
                    </div>
                </div>
            </div>   <!--[if (mso)|(IE)]></td></tr></table><![endif]-->
        </div>
        <!--[if (mso)|(IE)]></div><![endif]-->
    </body>
</html>
`;

    constructor() {}

    /**
     * @description gets the default HTML email message to be sent
     * uses Display Name for text in the Email and dashboardName for hyperlink to userdashboard
     * @param {string} dashboardName 
     * @param {string} dashboardDisplayName
     */
    getDefaultHtml(dashboardName: string, dashboardDisplayName: string): string {
        var dashboardHomepageUrl = 'href = "http://localhost:8080/DashboardConsole/';

        var replaceDashboardName = this.defaultEmailHtml.replace(new RegExp('ReplaceHrefToUserDashboard', 'g'), dashboardHomepageUrl + dashboardName + `"`);
        var replaceDashboardDisplayName = replaceDashboardName.replace(new RegExp('ReplaceDashboardName', 'g'), dashboardDisplayName);

        return replaceDashboardDisplayName;
    }
}

【讨论】：

  • 为此使用正则表达式是一种浪费，因为您从不使用初始字符串。您应该只创建一个构建 HTML 并采用两个参数的函数。例如：function getHtml(name, displayName){ return '&lt;p class="'+name+'"&gt;'+displayName+'&lt;/p&gt;'}
【解决方案3】： 
`   this.replacetext = "test angular";

let yourNewString = this.replacetext.replace(new RegExp('test', 'g'), '');
this.replacetext = yourNewString;

输出：

this.replacetext = " angular"

【讨论】：

    猜你喜欢
    • 2017-10-05
    • 1970-01-01
    • 2018-10-27
    • 2016-12-23
    • 1970-01-01
    • 2016-12-07
    • 2018-04-14
    • 2016-09-21
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode