HTML 요소에서 클릭 한 위치에서 텍스트 가져 오기

Question

일부 텍스트가 포함 된 div 요소가 있습니다. 사용자가 해당 div의 단어를 클릭하면 해당 단어 만 강조 표시하고 싶습니다.

이 작업을 수행하려면 텍스트의 어떤 위치에서 클릭이 발생했는지 알아야하므로 근처의 공백을 찾고 단어 주위에 몇 가지 서식을 삽입 할 수 있습니다.

텍스트 내에서 클릭이 발생한 위치를 찾는 것이 트릭입니다. 그런 종류의 일이 가능합니까?

Answer 1

페이지가 자동 생성되는 경우 모든 선택 가능한 div의 모든 단어 주변에 <span class = 'word'>을 두어 페이지 전처리를 고려할 수 있습니다. 사실 자바 스크립트를 사용하면이 문제를 해결할 수있을 것입니다. 그렇다고해도 문제가 해결 될 것이라고 생각합니다.하지만 사전 처리를하면 더 쉽게 사용할 수 있습니다.

단어의 절대 위치에 의존하는 문제는 사용자가 글꼴을 확장 할 수 있다는 것이므로이 작업이 특히 어렵습니다. 각 개별 단어 주위에 스팬을 배치하면 클릭 이벤트를 스팬 요소에 적용하여 클릭 한 단어를 쉽게 선택할 수 있습니다.