클래스 구문 분석 없이 Javascript의 텍스트 내에서 단어 클릭을 감지하는 방법은 무엇입니까?

클래스 구문 분석 없이 텍스트 내 단어 클릭 감지

Javascript에서는 텍스트 내 단어 클릭을 정확하게 감지하는 것이 어려울 수 있습니다. 일반적이지만 비효율적인 접근 방식에는 전체 HTML 문서를 클래스 구문 분석하고 요소를 사용하고 jQuery를 사용하여 이러한 범위에 대한 클릭을 추적합니다.

그러나 이제 더 세련된 솔루션을 사용할 수 있습니다.

창 선택 API 사용

Window Selection API는 현재 선택된 텍스트를 검색하는 방법을 제공합니다. 이 API를 활용하면 광범위한 HTML 구문 분석 없이도 클릭 감지 메커니즘을 구현할 수 있습니다.

다음은 Javascript 스니펫입니다.

<code class="javascript">$(".clickable").click(function(e) {
  s = window.getSelection();
  var range = s.getRangeAt(0);
  var node = s.anchorNode;

  // Find starting point
  while (range.toString().indexOf(" ") != 0) {
    range.setStart(node, range.startOffset - 1);
  }
  range.setStart(node, range.startOffset + 1);

  // Find ending point
  do {
    range.setEnd(node, range.endOffset + 1);
  } while (
    range.toString().indexOf(" ") == -1 &&
    range.toString().trim() != ""
  );

  // Alert result
  var str = range.toString().trim();
  alert(str);
});</code>

이 스니펫에서는 클릭 리스너를 사용하여 활성화합니다. 선택 API. 선택 항목의 시작 위치와 끝 위치를 분석하여 클릭한 단어를 추출할 수 있습니다.

브라우저 API 고려 사항

이 솔루션은 Webkit, Mozilla 및 IE9와 호환됩니다. . 브라우저 확장으로 사용하려는 경우 기본 API가 대상 브라우저에서 지원되는지 확인하세요.

하이라이트 대안

대안으로 클릭하는 대신 텍스트 강조 표시 기능을 사용하면 더욱 간단한 사용자 경험을 제공할 수 있습니다.

위 내용은 클래스 구문 분석 없이 Javascript의 텍스트 내에서 단어 클릭을 감지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!