Question

嗨，我正在使用ionic来加载作为本地HTML字符串的文章。

 <ion-content padding>
  <p  [innerHTML]="url"></p>
</ion-content>

url是本地html字符串。现在，我想做的是添加搜索栏，并在该html字符串和higlight中搜索并滚动到该文本。

任何想法我该如何开始。我已经添加了搜索栏

Answer 1

您可以使用管道将搜索到的文本应用于文本，

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

@Pipe({name: 'highlight'})

export class HighlightPipe implements PipeTransform {
    transform(text: string, search): string {
        try {
            if (text && search ) {
                text = text.toString(); // sometimes comes in as number
                search = search.trim();
                if (search.length > 0) {
                    let pattern = search.trim().replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
                    pattern = pattern.split(' ').filter((t) => {
                        return t.length > 0;
                    }).join('|');
                    let regex = new RegExp(pattern, 'gi');

                    text = text.replace(regex, (match) => `<span class="highlight">${match}</span>`);
                }
            }
        }
        catch (exception) {
            console.error('error in highlight:', exception);
        }
        return text;
    }
}

您可以根据需要更改.scss：

.highlight {
background-color:#FFFF00;
}

因此，要在模板中使用，它将类似于：{{myText |高亮显示：“单词”}}。

Ionic-搜索文本并在html字符串中突出显示吗？

1 个答案: