JavaScript를 사용하여 텍스트에서 클릭한 단어 감지

사용자가 단어를 클릭하여 선택할 수 있는 JavaScript 스크립트를 생성할 때 질문은 다음과 같습니다. 발생: 이것이 어떻게 효율적이고 우아하게 달성될 수 있습니까?

클래스 구문 분석을 사용하는 장황한 방법

일반적이지만 지루한 접근 방식은 전체 HTML을 구문 분석하고 각 단어를 다음과 같이 분리하는 것입니다. 공백을 사용하고 각 단어를 요소로 묶습니다. 그런 다음 단어 클래스에 대한 클릭을 감지하기 위해 이벤트 리스너가 추가되고, 클릭된 단어는 $(this).innerHTML을 통해 획득됩니다. 이 방법은 효과가 있지만 성능과 미적 측면에서는 아쉬운 점이 많습니다.

클래스 구문 분석 없이 최적화된 솔루션

보다 효율적이고 우아한 솔루션을 위해 다음을 고려하세요.

1단계: 선택 항목 캡처

window.getSelection()을 사용하여 사용자 선택 항목을 캡처합니다.

2단계: 단어 경계 식별

선택 범위를 반복하여 공백을 피하면서 클릭한 단어의 시작점과 끝점을 결정합니다.

3단계: 클릭한 단어 검색

선택 범위 내에서 식별된 문자를 결합하여 클릭된 단어를 형성합니다.

구현 예

다음 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);
});