Ionic - поиск текста и выделение в строке html?

Question

Привет! Я использую ionic для загрузки статьи, которая является локальной строкой HTML.

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

url - это локальная строка html. Теперь, что я хочу сделать, это добавить строку поиска и поиск в этой строке HTML и выделите и выделите этот текст.

Любая идея, как я могу начать. Я добавил панель поиска

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 |выделить: 'слово'}}

.