如何以角度突出显示文本输入占位符中的文本？答案

【问题标题】：How to highlight text in a text input placeholder in angular?如何以角度突出显示文本输入占位符中的文本？
【发布时间】：2020-05-20 03:15:05
【问题描述】：

我正在尝试在 Angular Material 网站中突出显示搜索到的文本。

我正在使用这样的管道：

export class HighlightSearch implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) { }

    transform(value: any, args: any): any {


        if (!args) {
            return value;
        }

        if (args.length < 1) {
            return value;
        }
        // Match in a case insensitive maneer
        const re = new RegExp(args, 'gi');
        const match = value.match(re);

        // If there's no match, just return the original value.
        if (!match) {
            return value;
        }

        const replacedValue = value.replace(re, "<mark style='background-color: #FAA50A; padding:0em;'>" + match[0] + "</mark>");
        return this.sanitizer.bypassSecurityTrustStyle(replacedValue);
}
}

在组件中我将管道用作：


<mat-label class="combobox-label" [innerHTML]="cstic.label | highlight: searchInput"></mat-label>

这行得通。

工作亮点

但是当我试图在占位符中突出显示搜索到的文本时，它不起作用...

我尝试这样使用它：

<input matInput  [placeholder]="cstic.label | highlight: searchInput" value={{cstic.assignedValue}}
                     [(ngModel)]="cstic.assignedValue" />

但我得到以下结果：

不工作的亮点

有人知道我该如何解决这个问题吗？

【问题讨论】：

你试过像this这样的边库吗
@shashanksharma 尝试了该库，但在我的情况下不起作用。
@Awais 我已经阅读了发布的问题，但也没有结果。我的代码适用于标签，但在我想标记占位符时不适用于这种特殊情况。
那么你需要创建一个https://stackblitz.com/你的代码示例
这里你可以找到一个小例子：stackblitz.com/edit/angular-uvrjnd

标签： javascript css angular

【解决方案1】：

我找到了解决方案。我从输入字段中删除了占位符并添加了一个标签，该标签的行为与占位符完全相同，但突出显示适用于它。

所以代替这段代码：

<mat-form-field>
                <input matInput placeholder={{cs.label}} [disabled]="cs.readOnly" value={{cs.value}}
                    [(ngModel)]="cs.assignedValue"                 [errorStateMatcher]="matcher" >
                <mat-label [innerHTML]="cs.label | highlight: searchInput">{{cs.label}} 
                 </mat-label>
            </mat-form-field>

我放了这个：

<mat-form-field>
                <input matInput [disabled]="cs.readOnly" value={{cs.value}}
                    [(ngModel)]="cs.assignedValue"                 [errorStateMatcher]="matcher" >
                <mat-label [innerHTML]="cs.label | highlight: searchInput">{{cs.label}} 
                 </mat-label>
            </mat-form-field>

【讨论】：