Javascript: So erkennen Sie, ob ein Wort hervorgehoben ist

Ich schreibe ein Firefox-Addon, das ausgelöst wird, wenn ein Wort hervorgehoben wird. Ich brauche jedoch ein Skript, das erkennt, wenn ein Wort hervorgehoben wird, und ich stecke fest. Ein Beispiel wäre nytimes.com (wenn Sie einen Artikel lesen und ein Wort markieren, erscheint das Referenzsymbol). Das nytimes.com-Skript ist jedoch sehr komplex. Ich bin 16 und kein großer Programmierer, also ist das definitiv weit außerhalb meiner Liga.

Der einfachste Weg, dies zu tun, ist zu erkennen mouseup und keyup Ereignisse auf dem Dokument und prüfen Sie, ob Text ausgewählt ist. Das Folgende funktioniert in allen gängigen Browsern.

Beispiel: 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;

Hier ist ein Skript:

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

Mit freundlicher Genehmigung von Code Toad:

http://www.codetoad.com/javascript_get_s selected_text.asp

In Ihrem Fall möchten Sie dieses Skript aufrufen, wenn die Auswahl getroffen wurde, und Sie können es dann beliebig verarbeiten, z. B. mit einer AJAX-Anfrage, um relevante Informationen zu erhalten, wie dies wahrscheinlich bei NYtimes der Fall ist.

In meinem Fall wollte ich in der Lage sein, entweder einen Text in einer Reihe von hervorzuheben und in die Reihe zu klicken und mich zu einer anderen Route wie „/entity/:id“ zu schicken;

Ich habe eine Funktion erstellt, die erkennt, dass die Maus Text hervorhebt:

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

dann fügte ich dies der Reihe der hinzu

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

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

Auf diese Weise kann der Benutzer das Namensfeld hervorheben oder irgendwo anders klicken und zu “/entity/:id” gehen.

Verwenden Rangy.js und jQuery:

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