正規表現結果をHTMLコード化してマッチ部分をハイライト表示

C:\src\js\regexp_viewer>npm install regex-viewer

+ regex-viewer@1.0.2

"use strict";

var viewer = require("regex-viewer");

// ダミーメール文字列
var str = `
お世話になっております。○○です。
詳細は口頭でお話させて頂きたいと存じます。
私の個人携帯：999-999-9999
または
代表番号：99-9999-9999
までご連絡下さい。
`;
var regex = /\d{2,4}-\d{2,4}-\d{4}/gi;

viewer(str, regex);

let replacement = mail.replace(
    regex,
    str =>
        `<span style="color: white;background-color: red;border-radius: 5px;">` +
        str +
        `</span>`
);

    <mat-card>
        <mat-card-title>
            メール１
        </mat-card-title>
        <mat-card-subtitle>
            日付
        </mat-card-subtitle>
        <mat-card-content [innerHtml]="safeHtml">
        </mat-card-content>
    </mat-card>

import { Component } from "@angular/core";
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.scss"]
})
export class AppComponent {

    // 正規表現処理後文字列、DomSsanitizerによってセーフマーク
    safeHtml: SafeHtml;

    // サンプル原文
    mail: string = `
お世話になっております。○○です。
詳細は口頭でお話させて頂きたいと存じます。
私の個人携帯：999-999-9999
または
代表番号：99-9999-9999
までご連絡下さい。
`;

    constructor(private sanitizer: DomSanitizer) {
        this.safeHtml = this.extractPhoneNumber(this.mail);
    }

    public extractPhoneNumber(mail: string): SafeHtml {
        let regex = /\d{2,4}-\d{2,4}-\d{4}/gi;

        // マッチした文字列をハイライトする為のspanタグを挿入
        let replacement = mail.replace(
            regex,
            str =>
                `<span style="color: white;background-color: red;border-radius: 5px;">` +
                str +
                `</span>`
        );

        // 中に含まれているタグを安全なものとしてマーク
        let safeHtml: SafeHtml = this.sanitizer.bypassSecurityTrustHtml(
            replacement
        );

        return safeHtml;
    }