페이스북에 인물을 추가하면 인물명 주변에 테두리를 표시해 강조한다(gif 이미지 참조).
내가 이 방법을 설명할게.

TL;DR

textarea의 강조는 단지 textarea를 투명하게 한 후에 감각적인 배경을 설정할 뿐이라는 것을 나타낸다

textarea에 DOM을 넣어도 표시되지 않음

갑자기 생각해보면 textarea에 DOM 트리를 넣으면
Textarea에 DOM 직접 기술하기

<textarea><span>1</span></textarea>

그러나 전혀 그런 일이 없었다. 그렇게 문자열이 표시되었다.

모두가 알다시피 textarea와 input은 다른 요소처럼 하위 요소를 나타내지 않고 자신의value 속성의 값을 화면에 나타내는 역할을 한다.value 속성은 문자열을 저장하는 데 사용되므로 DOM을 입력할 수 없습니다.

중첩 강조용 DOM

textarea에 DOM을 직접 넣을 수 없기 때문에 어쩔 수 없이 주변에 설치된 DOM의 위치를 미세하게 조정한 후 겹쳐서 textarea를 강조하는 것처럼 보입니다.
이 때 문제는 textarea와 일치하는 DOM의 z축 방향의 위치 관계입니다.textarea 이전에는 textarea를 선택할 수 없습니다.다른 한편,textarea 뒤에 있으면 표시되지 않습니다.
그럼 어떻게 하면 좋을까요?

background-color: 간

textarea의 배경색을 투명하게 해서 뒤에 있는 DOM을 표시하면 됩니다.그러니까 textareabackground-color: transparent;이 정도면 됐어.

어떻게 느낌이 좋은 곳에 배경색을 칠하지?

또 하나 고려해야 할 것은 배경을 어디에 설치해야 하는가이다.방법은 여러 가지가 있는데 후술한 견본이 실현된 상황에서textarea의 문자열 뒤에 똑같은 투명 문자열을 설정하여 해당하는 부분을 강조한다.완전히 같은 문자열을 완전히 똑같이 뒤에 두기 때문에 위치가 적합할 것이다.다른 방법도 있으니 고려해 보세요.

견본

그리고 한번 해 봤어요.

https://github.com/yuku-t/jquery-overlay

이 플러그인은 정규 표현식에 지정한 문자열에 배경색을 간단하게 추가합니다.
매우 간단하기 때문에 며칠 전에 공개된 textarea의 보완 기능이 부착된 플러그인도 간단하게 결합할 수 있다.프라가부르 만세＼(^o^)/

http://yuku-t.com/jquery-textcomplete/#textarea3

textarea를 사용하면 배경색을 바꾸는 강조 수단만 있습니다

상술한 견본 페이지를 보여준 사람은 주의할 수 있으나 배경색을 추가하는 이외의 강조 방법을 사용할 수 없습니다.예를 들어 문자의 색깔, 사체자, 굵기, 크기를 바꾸려고 해도 안 된다.
그 이유는 textarea를 사용했기 때문이다.도대체 표시된 문자열은textarea에서 온 것이기 때문에 이 문자의 일부 색깔을 바꿀 수도 없고, 사체로 표시할 수도 없다. (단, 가능하다면 이렇게 빙빙 돌지 않아도 된다.)

콘텐츠 Editable을 사용하면 어떤 방법이 있을까요?

contentEditable을 사용할 수 없습니까?그렇게 생각하는 사람도 있을 거야.그렇습니다. contentEditable을 사용할 수도 있습니다.이것을 사용하면 글자의 크기도 마음대로 바꿀 수 있어 표현력이 높다.
그런데 귀찮아서 +contentEditable 내 커서 위치를 제어하기 어려워요. (JavaScript는 조정할 수 없나요?)그래서 포기했어요.

총결산

textarea의 강조는 단지 textarea를 투명하게 한 후에 감각적인 배경을 설정할 뿐이라는 것을 나타낸다