단락에서 간단한 지시로 텍스트를 강조하다

어떻게 영어의 지령을 빌려 단락의 텍스트를 돋보이게 합니까?특히 검색어와 일치하는 텍스트를 강조하는 데 도움이 된다.브라우저나 IDE에서 컨텐츠를 검색할 때 일치하는 항목이 강조표시되어 정확한 위치를 가리킬 수 있습니다.

텍스트 강조 표시

다음은 우리가 본문에서 세울 내용이다.Angular에는 매우 간단하고 직접적인 하이라이트 명령이 있습니다.우리는 크롬 개발 도구에서 유사한 것을 보았다.
이 생각은 매우 간단하다.검색어에 일치하고 일치하는 텍스트를 span 또는 mark ref 표시에 어떤 방식으로 포장하면 나중에 필요에 따라 스타일 설정을 할 수 있습니다.

일치하는 텍스트를 어떻게 강조 표시합니까?

우리는 Regex 단락에서 일치하는 항목을 찾을 것입니다.정규 표현식은 문자열에서 이런 조작을 실행하는 것을 매우 간단하게 한다.이상적인 경우, 명령은 텍스트를 포함하는 요소에만 추가되어야 한다.
이것이 바로 우리가 건설하고 있는 것이다.

그러니까 우리 지령을 계획해 보자.
지령의 주요 입력은 강조해야 할 용어다.그래서 우리는 @Input()를 사용하여 이 용어를 우리의 지령에 전달할 것이다.나는 이것이 바로 우리가 지령에 필요한 것이라고 생각한다.
그래서 지금 우리는 검색할 실제 단락을 찾아야 한다.따라서 HTMLElement 에서 텍스트를 얻을 수 있는 간단한 방법이 있다.우리는 textContent ref 를 사용하여 텍스트를 검색할 수 있다.

Highlight 명령 작성

예전과 같이, 명령어를 위한 새 모듈만 만드는 것을 권장합니다.만약 당신이 정말로 코드 라이브러리를 정확하게 관리한다면, 프로젝트에 라이브러리를 만드는 것도 고려할 수 있다.
간단히 보기 위해 코드는 lib 폴더에 배치합니다.

lib/
├── highlight/
│   ├── highlight.module.ts
│   ├── highlight.directive.ts

강조 표시 모듈

이 모듈은 우리의 지령을 간단하게 설명하고 내보낼 것이다.여기는 아무것도 필요 없어요.

import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { HighlightDirective } from "./highligh.directive";

@NgModule({
  declarations: [HighlightDirective],
  imports: [CommonModule],
  exports: [HighlightDirective]
})
export class HighlightModule {}

강조 표시 명령

현재, 우리의 설정이 완성되었습니다. 우리는 우리의 지령을 만들기 시작할 수 있습니다. 모든 마법이 발생할 것입니다.

import {
  Directive,
  ElementRef,
  HostBinding,
  Input,
  OnChanges,
  SecurityContext,
  SimpleChanges
} from "@angular/core";
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";

@Directive({
  selector: "[highlight]"
})
export class HighlightDirective implements OnChanges {
  @Input("highlight") searchTerm: string;
  @Input() caseSensitive = false;
  @Input() customClasses = "";

  @HostBinding("innerHtml")
  content: string;
  constructor(private el: ElementRef, private sanitizer: DomSanitizer) {}

  ngOnChanges(changes: SimpleChanges) {
    if (this.el?.nativeElement) {
      if ("searchTerm" in changes || "caseSensitive" in changes) {
        const text = (this.el.nativeElement as HTMLElement).textContent;
        if (this.searchTerm === "") {
          this.content = text;
        } else {
          const regex = new RegExp(
            this.searchTerm,
            this.caseSensitive ? "g" : "gi"
          );
          const newText = text.replace(regex, (match: string) => {
            return `<mark class="highlight ${this.customClasses}">${match}</mark>`;
          });
          const sanitzed = this.sanitizer.sanitize(
            SecurityContext.HTML,
            newText
          );
          this.content = sanitzed;
        }
      }
    }
  }
}

코드 분해를 진행합시다.
우리가 가장 먼저 필요한 것은 지령 중의 입력이다.우리는 사실상 검색어만 필요하지만, 나는 명령에 약간의 추가 기능을 추가했다.강조 표시된 텍스트 제공 customClasses 과 다른 로고 caseSensitive 를 선택할 수 있습니다. 이 사례와 일치해야 하는지 여부를 결정합니다.

@Input("highlight") searchTerm: string;
@Input() caseSensitive = false;
@Input() customClasses = "";

다음은 숙주 요소의 속성에 값을 추가할 수 있는 HostBindingref를 추가합니다.

@HostBinding("innerHtml")
 content: string;

우리는 숙주 원소의 innerHtml(ref 속성에 귀속됩니다.우리도 이렇게 할 수 있다.

this.el.nativeElement.innerHtml = 'some text';

숙주 요소에 접근하기 위해 우리는 구조 함수에 ElementRef를 주입했고 직접적인 HTML 작업을 처리하기 위해 DomSanitizerref를 주입하여 HTML을 원소에 주입하기 전에 정리했다.
이제 우리는 ngOnChangesref생명주기 갈고리에서 작성할 수 있는 실제 논리에 대해 계속 토론할 것이다.따라서 검색어가 바뀔 때 하이라이트를 업데이트할 수 있습니다.흥미로운 점:

const regex = new RegExp(this.searchTerm,this.caseSensitive ? "g" : "gi");
const newText = text.replace(regex, (match: string) => {
     return `<mark class="highlight ${this.customClasses}">${match}</mark>`;
});
const sanitzed = this.sanitizer.sanitize(
    SecurityContext.HTML,
    newText
);
this.content = sanitzed;

우선, 일치하는 항목을 찾을 수 있도록 정규 표현식을 설정합니다.caseSensitive 조건에 따라 우리는 서로 다른 정규 표현식 표지를 추가하기만 하면 된다.

g-모든 일치하는 항목을 검색합니다.

gi - 대소문자를 무시하고 모든 일치하는 항목을 검색합니다.

우리는 단지 문자열에 mark (ref 방법으로 replace 포장 일치 항목을 표시할 뿐입니다.

const newText = text.replace(regex, (match: string) => {
     return `<mark class="highlight ${this.customClasses}">${match}</mark>`;
});

그 다음에 newText (HTML 문자열) 를 정리해야 innerHTML에 연결할 수 있습니다.우리는 sanitize 클래스에서 DomSanitizerref 방법을 사용합니다.

const sanitzed = this.sanitizer.sanitize(
    SecurityContext.HTML,
    newText
);

현재 우리는 소독을 거친 값을content 속성에 분배하고 이 속성은innerHTML을 통해HostBinding에 추가한다.

사용법

이것이 바로 우리가 구성 요소에서 그것을 사용하는 방식이다.우리의 지령을 조립품에 사용할 수 있도록 수입HighlightModule을 확보하세요.

<p [highlight]="searchTerm" [caseSensitive]="true" customClasses="my-highlight-class">
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book.
</p>

이게 다야!우리는 명령을 사용하여 매우 간단한 텍스트 하이라이트 디스플레이를 성공적으로 만들었다.여느 때와 마찬가지로 위의 코드를 직접 다시 사용하지 말고 최적화를 시도하십시오. 언제든지 기능을 추가하거나 삭제할 수 있습니다.

데모 및 코드

코드 샌드박스: https://codesandbox.io/s/ng-highlight-11hii

연락 주세요.

Github

반드시 평론 부분에 너의 생각을 첨가해야 한다.
보안 유지❤️