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

Today I Learend

지난 TIL에서 마지막에 어떻게 해야할지 전혀 감이 없다고 느끼면서 Node에 대해서 더 명확한 이해가 필요하다고 생각했다.

생활코딩을 통해 Node가 어떤 역할을 하는지 대강 배웠다.

노드를 주변 노드 찾기 그리고 삽입/수정/삭제 등을 할 수 있다는 걸 코드로 보면서 내 프로젝트에도 아이디어가 생겼다.

내가 풀고자 하는 문제는 이렇다.

태그가 없는 plain text를 하이라이트하고 로컬스토리지에서 다시 가져와 하이라이트하면서 새로고침해도 문제가 없도록 구현하는 것은 했지만 여러가지 예외상황을 처리하려고 하니 문제였다.

첨으로 맞이한 문제는 하이라이트하려는 곳에 태그가 같이 있으면 의도하는대로 처리가 안되는 점이다.

예를 들어서 나는 <b>사람</b> 입니다 텍스트에서 "람 ~ 입니다" 까지 하이라이트하면 나는 <b>사</b><하이라이트>람 입니다</하이라이트> 처럼 되버리는 문제가 있다.

이것을 해결하려면 노드에 대한 이해가 필요했었다는 걸 깨달았다.

나는 이렇게 해결하려고한다.

1. anchorNode, focusNode 를 가져온다. 그러면 b태그의 노드 그리고 TEXT_NODE가 생기면서 구분이 된다
2. Selection에서 무엇을 선택했는지 toString으로 가져온다.
3. anchorNode와 focusNode의 text를 합한다.
4. 합한 것에서 선택한 text의 시작문자와 끝문자의 인덱스를 가져온다.
5. substring을 이용해서 합한 text에서 선택한text를 지운다.
6. 선택한text를 지울때 왼쪽,오른쪽의 남은 텍스트가 뭔지 어떻게든 가져온다
7. 각각의 Node.parentElement.innerHTML에서 지금까지 가져온 정보들을 바탕으로 하이라이트태그를 각각 만들어준다.

말로하니까 무슨말인지 나도 모르겠다. 내일은 코드로 꼭..!