Сопоставление строк с помощью регулярного выражения с использованием функции pipe в angular6

Question

Мой Angular Код выглядит примерно так

highlight.pipe.ts

import { PipeTransform, Pipe } from "@angular/core";

@Pipe({
name: 'highlight'
})

export class HighlighterPipe implements PipeTransform {

    transform(value: any, args: any): any {
        if (!args) {return value;}
        var re = new RegExp(args, 'gi');
        return value.replace(re, "<span class='highlight'>$&</span>");
    }
}

И мой файл HTML, где я использую функцию конвейера:

<li *ngFor="let wordWheelWords of wordwheelResponse" role="option" class="option">
    <button type="button" [innerHTML]="wordWheelWords | highlight: inputBox">
    </button>
</li>

Где «inputBox» - это не что иное, как строка, введенная пользователем в поле поиска.

Ошибка этой игры:

Invalid regular expression: /Hall's Sentencing (/: Unterminated group
    at new RegExp (<anonymous>)

Когда поле ввода было «Холла» Sentencing ("и worldWheelwords было" Hall's Sentencing (NZ) ". Я подумал, что ошибка была в том, что я не избежал" ("), поэтому я изменил код на:

highlight.pipe.ts

export class HighlighterPipe implements PipeTransform {

transform(value: any, args: any): any {
    if (!args) {return value;}
    args = args.trim()
                        .replace(/\\/g, "\\\\") // escape \
                        .replace(/\[/g, "\\[") // escape [
                        .replace(/\(/g, "\\[") // (  →  [
                        .replace(/\)/g, "\\]"); // )  →  ]
    var re = new RegExp(args, 'gi');
    return value.replace(re, "<span class='highlight'>$&</span>");
}
}

Что больше не дало мне ошибки. Но теперь выделение останавливается на "(".

Что означает, что пока я не введу "Приговор Холла" в innerBox, оно подсвечивается нормально, но как только когда я вхожу в «Приговор Холла», он перестает выделять все, хотя worldWheelWords идентичны.