Javascript : Comment détecter si un mot est mis en évidence

Question

J'écris un module complémentaire pour Firefox qui se déclenche chaque fois qu'un mot est mis en évidence. Cependant, j'ai besoin d'un script qui détecte quand un mot est surligné, et je suis coincé. Un exemple serait nytimes.com (lorsque vous lisez un article et que vous surlignez un mot, l'icône de référence s'affiche). Cependant, le script de nytimes.com est super complexe. J'ai 16 ans et je ne suis pas un grand programmeur, donc ce n'est pas de mon ressort.

Answer 1

Le moyen le plus simple de le faire est de détecter mouseup y keyup sur le document et vérifiez si un texte est sélectionné. Ce qui suit fonctionnera dans tous les principaux navigateurs.

Exemple : http://www.jsfiddle.net/timdown/SW54T/

function getSelectedText() {
    var text = "";
    if (typeof window.getSelection != "undefined") {
        text = window.getSelection().toString();
    } else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
        text = document.selection.createRange().text;
    }
    return text;
}

function doSomethingWithSelectedText() {
    var selectedText = getSelectedText();
    if (selectedText) {
        alert("Got selected text " + selectedText);
    }
}

document.onmouseup = doSomethingWithSelectedText;
document.onkeyup = doSomethingWithSelectedText;

Answer 2

Voici un script :

<script>
function getSelText()
{
    var txt = '';
    if (window.getSelection)
    {
        txt = window.getSelection();
    }
    else if (document.getSelection)
    {
        txt = document.getSelection();
    }
    else if (document.selection)
    {
        txt = document.selection.createRange().text;
    }
    else return;
document.aform.selectedtext.value = txt;
}
</script>
<input type="button" value="Get selection" onmousedown="getSelText()"> 
<form name="aform">
<textarea name="selectedtext" rows="5" cols="20"></textarea>
</form>

Avec l'aimable autorisation de Code Toad :

http://www.codetoad.com/javascript_get_selected_text.asp

Dans votre cas, vous voudriez appeler ce script lorsque la sélection est faite, et ensuite vous pouvez la traiter comme vous le souhaitez, avec une requête AJAX pour obtenir des informations pertinentes par exemple, comme le NYtimes le fait probablement.

Answer 3

Dans mon cas, je voulais pouvoir soit mettre en surbrillance un texte dans une ligne de la et cliquer dans la ligne et m'envoyer vers une autre route comme "/entity/:id" ;

J'ai créé une fonction qui détecte que la souris met en évidence un texte :

export const isHighlighting = () => {
  // detects mouse is highlighting a text
  return window.getSelection && window.getSelection().type === 'Range';
};

puis j'ai ajouté ceci à la ligne du

const handleClick = (id) => {
  if (!isHighlighting() {
     history.push(`/entity/${id}`)
  }
}

{data.map((item) => (
  <tr>
    <td onClick={() => handleClick(item.id)}>{item.name}</>
  </tr>
))}

de cette façon, l'utilisateur peut mettre en évidence le champ du nom ou cliquer ailleurs et aller à "/entity/:id".

Answer 4

Utilisation de rangy.js et jQuery :

$('#elem').on('keyup mouseup', function(){
    var sel = rangy.getSelection()
    if (sel.rangeCount === 0 || sel.isCollapsed) return
    alert(sel.toString())
})