브라우저 기본 개체만 사용하여 웹 사이트에서 강조 표시된 텍스트를 얻으려면 어떻게 해야 합니까?

강조 표시된 텍스트 가져오기

웹 사이트의 단락에서 강조 표시된 텍스트를 검색하는 것은 jQuery와 같은 추가 라이브러리 없이 수행할 수 있는 간단한 작업입니다.

브라우저 네이티브 사용 개체

다음 코드 조각은 브라우저 기본 개체를 사용하여 강조 표시된 텍스트를 검색하는 방법을 보여줍니다.

function getSelectionText() {
    let text = "";

    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }

    return text;
}

향상된 구현

텍스트 영역 및 텍스트 입력 필드와 같은 다른 양식 요소에서 텍스트 선택을 처리하려면 향상된 구현을 수행할 수 있습니다. 사용:

function getSelectionText() {
    let text = "";
    const activeElement = document.activeElement;

    if (
        (activeElement.tagName.toLowerCase() === "textarea") ||
        (activeElement.tagName.toLowerCase() === "input" && /^(?:text|search|password|tel|url)$/i.test(activeElement.type)) &&
        (typeof activeElement.selectionStart === "number")
    ) {
        text = activeElement.value.slice(activeElement.selectionStart, activeElement.selectionEnd);
    } else if (window.getSelection) {
        text = window.getSelection().toString();
    }

    return text;
}

실시간 업데이트

선택한 텍스트를 실시간으로 표시하려면 onmouseup, onkeyup 및 같은 문서 이벤트에 이벤트 리스너를 추가할 수 있습니다. 선택 변경시. 업데이트된 텍스트는 텍스트 상자와 같은 지정된 요소에 채워질 수 있습니다.

위 내용은 브라우저 기본 개체만 사용하여 웹 사이트에서 강조 표시된 텍스트를 얻으려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!