HTML을 수정하지 않고 텍스트에서 클릭된 단어를 감지하는 방법은 무엇입니까?

클릭 이벤트 기반 단어 감지

웹 개발에서 텍스트 내에서 클릭된 단어를 식별하는 것은 대화형 애플리케이션에 필수적일 수 있습니다. 일반적인 접근 방식 중 하나는 HTML을 구문 분석하고 각 단어를 범위 요소로 래핑하고 jQuery를 사용하여 클릭을 감지하고 단어의 텍스트를 검색하는 것입니다. 그러나 이 솔루션은 비효율적이며 미학적으로도 매력적이지 않습니다.

프로세스를 향상하기 위해 대량의 HTML 수정이 필요하지 않은 대체 방법을 사용할 수 있습니다. 이 솔루션은 Webkit, Mozilla 및 IE9와 같은 최신 브라우저에서 지원되는 Selection API를 활용합니다.

제공되는 JavaScript 구현(https://jsfiddle.net/Vap7C/15/)은 다음을 통해 단어 감지를 활성화합니다. 단계:

1. 대상 텍스트 요소에 대한 클릭 이벤트 핸들러를 정의합니다.
2. getSelection() 메서드를 사용하여 현재 텍스트 선택을 검색합니다.
3. 범위 만들기 개체를 사용하여 텍스트 내에서 단어의 시작 위치와 끝 위치를 결정합니다.
4. 텍스트를 반복하여 공백을 기준으로 단어의 시작 위치를 찾습니다.
5. 범위를 확장하여 단어의 끝 위치를 찾습니다. 다시 공백을 기반으로 합니다.
6. 선택한 텍스트를 잘라내어 클릭한 단어로 표시합니다.

이 방법을 사용하면 많은 비용을 들이지 않고도 클릭 기반 단어 감지를 더 빠르고 깔끔하게 구현할 수 있습니다. HTML 수정 또는 외부 브라우저 API. 다양한 브라우저에서 효과적으로 작동하여 대화형 텍스트 기반 애플리케이션을 위한 안정적인 솔루션을 제공합니다.

위 내용은 HTML을 수정하지 않고 텍스트에서 클릭된 단어를 감지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!