[TIL 2021.11.02] 태그가 포함된 텍스트 하이라이트 (2)

Kyu·2021년 11월 2일
1

TIL

목록 보기
295/322

Today I Learend
[Codeigniter] 트랜잭션 테스트
[PhpStorm] extract() 함수 unrecognized 없애기
[CodeIgniter] 쿼리가 잘 들어갔는지 성공적이었는지 체크하기

어제 TIL
https://velog.io/@kyukim/20211101


Node의 parentElement는 Node가 가지는 텍스트의 가장 근접한 태그를 포함한 Element를 가져온다.

<태그1><태그2>abcde</태그2> 12345</태그1>

de 12345를 선택했으면 이 selection의 anchorNode와 focusNode는 다르다.

anchorNode는 <태그2>abcde</태그2> 이고,
focusNode는 <태그1><태그2>abcde</태그2> 12345</태그1> 전체이다.

참고: Node VS Element 엘리먼트는 특정한 하나의 노드를 엘리먼트라한다. 노드는 더 큰범위에서 그룹을 지칭하는 말. 어떤 것이든 노드가 될 수 있다.
https://stackoverflow.com/questions/9979172/difference-between-node-object-and-element-object

결국, anchorNode와 focusNode가 다르면 그 사이에 다른 태그가 존재한다는 뜻이다.

var a = selection.anchorNode?.parentElement?.innerHTML;
var b = selection.focusNode?.parentElement?.innerHTML;

Element를 비교하거나 Node를 비교하는 것이 js에서 괜찮을까?싶어서 왜냐면 첫언어였던 자바에서 객체를 비교한다는 것은 레퍼런스를 비교하냐 아니면 그 내용물을 비교하냐 의미를 두고 생각해야했기 때문에, string 으로 값을 들고와서 비교하도록 했다.

if (a !== b) { //code };

이 두개가 다르면 태그가 있는 것이다.

code 란에는 선택된 텍스트에서 어떤 방법으로 텍스트를 나누어서 하이라이트하는 태그를 두개 따로 붙여줘야할지를 붙여야할 것이다.

de 12345를 선택하면 anchorNode와 focusNode를 가지고 Node 단위로 구분을 해줄 수 있지만 어떻게 de를 따로, 12345를 따로 가져와서 하이라이트 태그를 붙일거냐는 거다.

어렵다..

profile
TIL 남기는 공간입니다

0개의 댓글