Comment puis-je obtenir du texte en surbrillance à partir d'un site Web en utilisant uniquement des objets natifs du navigateur ?

Obtenir le texte en surbrillance

Récupérer le texte en surbrillance à partir du paragraphe d'un site Web est une tâche simple qui peut être accomplie sans bibliothèques supplémentaires comme jQuery.

Utilisation du navigateur natif Objets

L'extrait de code suivant montre comment récupérer le texte en surbrillance à l'aide d'objets natifs du navigateur :

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;
}

Implémentation améliorée

Pour gérer la sélection de texte dans d'autres éléments de formulaire tels que les zones de texte et les champs de saisie de texte, une implémentation améliorée pourrait être utilisé :

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;
}

Mise à jour en temps réel

Pour afficher le texte sélectionné en temps réel, des écouteurs d'événements peuvent être ajoutés pour documenter des événements tels que onmouseup, onkeyup et lors du changement de sélection. Le texte mis à jour peut ensuite être renseigné dans un élément désigné, tel qu'une zone de texte.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!