자바스크립트 "Selection API"

JavaScript Selection API는 개발자가 웹 페이지에서 사용자가 선택한 텍스트와 상호 작용할 수 있도록 하는 브라우저 API입니다. Selection API는 개발자가 선택한 텍스트에 대한 정보를 검색하거나 수정하거나 선택한 텍스트를 기반으로 일부 작업을 수행하는 데 사용할 수 있는 일련의 메서드 및 속성을 제공합니다.

​

다음은 Selection API를 사용하여 선택한 텍스트를 가져오는 방법의 예입니다.

​

// Get the selected text

const selection = window.getSelection();

const selectedText = selection.toString();

console.log(selectedText);

​

이 예제에서는 먼저 `window.getSelection()` 메서드를 사용하여 현재 선택 항목을 가져옵니다. 그런 다음 `toString()` 메서드를 사용하여 선택 개체를 문자열로 변환하고 선택한 텍스트를 검색합니다.

​

선택 API를 사용하여 선택한 텍스트를 수정할 수도 있습니다. 예를 들면 다음과 같습니다.

​

// Replace the selected text with new text

const selection = window.getSelection();

const range = selection.getRangeAt(0);

range.deleteContents();

range.insertNode(document.createTextNode('new text'));

​

이 예제에서는 먼저 `window.getSelection()`을 사용하여 현재 선택 항목을 가져옵니다. 그런 다음 `getRangeAt()` 메서드를 사용하여 선택 범위를 검색합니다. 범위가 있으면 `deleteContents()` 메서드를 사용하여 내용을 삭제한 다음 `insertNode()` 메서드를 사용하여 새 텍스트 노드를 삽입합니다.

​

Selection API는 또한 선택한 텍스트에 대한 정보를 검색하는 몇 가지 속성과 메서드를 제공합니다. 예를 들면 다음과 같습니다.

​

// Get the start and end offsets of the selection

const selection = window.getSelection();

const range = selection.getRangeAt(0);

const startOffset = range.startOffset;

const endOffset = range.endOffset;

console.log(`Start: ${startOffset}, End: ${endOffset}`);

​

이 예제에서는 현재 선택을 다시 가져오고 `getRangeAt()`를 사용하여 해당 범위를 검색합니다. 그런 다음 각각 `startOffset` 및 `endOffset` 속성을 사용하여 범위의 시작 및 끝 오프셋을 검색합니다.

​

전반적으로 Selection API는 웹에서 사용자가 선택한 텍스트로 작업하기 위한 강력한 도구 세트를 제공합니다.