[TIL 2021.11.01] 태그가 포함된 텍스트 하이라이트

Today I Learend
[Javascript] Element생성하고 id 또는 class 붙이기

하이라이트 하는 텍스트에 태그가 있을 땐 다르게 처리해줘야한다.

그래서 먼저 텍스트를 선택할 때 그 텍스트에 태그가 포함되어 있는지 체크하려한다.

태그가 있을 경우에는, 태그 안쪽에 하이라이트 태그를 추가하고 추가적으로 태그가 없는 텍스트에도 따로 태그를 한다.

12345 abcde 라는 텍스트가 있을 때, 아래와 같이 html태그가 적용되어있다고 치자.

<태그>12345</태그> abcde

현재 5 abcde를 하이라이트하면 아래와 같이 바뀐다.

<태그>1234</태그><하이라이트>5 abcdef<하이라이트>

12345까지가 어떤 역할을 하는 태그인데, 하이라이트하면서 요소가 바뀌는 것이다.

그래서 의도하고자 하는 코드는 아래와 같다.

<태그>1234<하이라이트>5</하이라이트></태그><하이라이트> abcde</하이라이트>

이렇게하려면 Element.innerHTML를 이용해야한다고 생각해서 텍스트를 선택한 후에 즉, document.getSelection() 한 후에 어떻게 Element.innerHTML을 할까 고민중이다.