[javascript] 유니 코드 문자가 JavaScript의 HTML에서 이모티콘으로 렌더링되는 것을 방지하는 방법은 무엇입니까?

이모지가 텍스트에서 너무 눈에 띄지 않도록 단색 디스플레이를 강제하는 것이 주요 관심사라면 CSS 필터를 단독으로 또는 유니 코드 변형 선택기와 함께 사용하는 것이 좋습니다.

p.gscale {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
a {
  color: #999;
  -webkit-filter: grayscale(100%) sepia(100%) saturate(400%) hue-rotate(170deg);
   filter: grayscale(100%) sepia(100%) saturate(400%) hue-rotate(170deg);
}

<p class="gscale">You've now got emoji display on ?lockdown?.</p>

<p>External Link: <a href="https://knowyourmeme.com/memes/party-hard">celebrate ?</a></p>

변형 선택기와 달리 CSS 필터가 모든 것에 적용되기 때문에 이모티콘이 어떻게 렌더링되는지는 중요하지 않습니다. (나는이 아이콘을 사용하여 Wayback Machine을 가리 키도록 수정 된 하이퍼 링크의 PNG 형식 “링크 유형”아이콘을 회색조로 표시합니다.)

다만 주의 할 마음 . 자식에서 부모 요소의 필터를 재정의 할 수 없으므로이 기술을 사용하여 단락을 회색조로 표시 한 다음 단락 내의 링크를 다시 색상화할 수 없습니다. ?

… 그래도 모든 것을 하이퍼 링크로 만들거나 그 안에 풍부한 마크 업을 허용하지 않는 상황에 유용합니다. (예 : 제목 및 설명)

그러나 이것은 CSS가 실제로 적용되지 않는 한 작동하지 않으므로 <title>유니 코드 변형 선택기보다 요소 에서 더 안정적인 두 번째 옵션을 제공 할 것입니다 (GitHub를보고 있습니다. 브라우저 탭) :

사용자가 제공 한 문자열을 <title>요소에 넣는 경우 굵게 / 기울임 꼴 / 밑줄 등과 함께 그림 이모티콘을 필터링합니다. 마크 업. (예, 그것을 놓친 사람들을 위해 표준은 <title>앰퍼샌드 이스케이프와 내가 테스트 한 모든 브라우저에서 모든 태그를 리터럴 텍스트로 해석하는 것을 제외하고 일반 텍스트로 내용을 요구합니다.)

내가 생각할 수있는 두 가지 방법은 다음과 같습니다.

1. 최신 버전의 유니 코드가 이모티콘과 수정자를 넣는 블록과 일치 하는 수동으로 유지 관리되는 정규식 을 직접 사용합니다 .
2. 자소 클러스터를 반복 하고 인식 된 이모 지 코드 포인트를 포함하는 모든 것을 버립니다 . (grapheme 클러스터는 기본 글리프와 모든 분음 부호 및 가시적 문자를 구성하는 기타 수정 자입니다. 링크 된 예제는 Python의 정규식 엔진을 사용하여 토큰 화 한 다음 emoji데이터베이스 용 패키지를 사용하지만 Rust는 언어의 좋은 예입니다. 반복되는 자소 클러스터는 unicode-segmentation.) 와 같은 크레이트를 통해 빠르고 쉽습니다 .)

답변

.violet {
  color: white;
  filter: grayscale(100%) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='f'><feColorMatrix type='matrix' values='0.78 0 0 0 0  0 0.082 0 0 0  0 0 0.522 0 0  0 0 0 1 0'/></filter></svg>#f");
}