Kevin Powell - Community•9mo ago

get Text and link (if exists) when users highlight text on screen.

Hi guys, I wonder that how can I get text and the link when users highlight it on screen? I got the text by this func but do not know how to get the link. Can anyone help me?

 function getSelectionText() {
        var text = "";
        if (window.getSelection) {
          text = window.getSelection().toString();
        } else if (
          document.selection &&
          document.selection.type !== "Control"
        ) {
          text = document.selection.createRange().text;
        }
        if (text) console.log("🚀 ~ getSelectionText ~ text:", text);
        return text;
      }
      document.onmouseup = function () {
        getSelectionText();
      };

 function getSelectionText() {
        var text = "";
        if (window.getSelection) {
          text = window.getSelection().toString();
        } else if (
          document.selection &&
          document.selection.type !== "Control"
        ) {
          text = document.selection.createRange().text;
        }
        if (text) console.log("🚀 ~ getSelectionText ~ text:", text);
        return text;
      }
      document.onmouseup = function () {
        getSelectionText();
      };

11 Replies

Chris Bolson•9mo ago

Try this:

function getSelectionText() {
    let text = "";
    let href = "";

    if (window.getSelection) {
        const selection = window.getSelection();
        text = selection.toString();
        const selectedRange = selection.getRangeAt(0);
        // find any "a" elements
        const links = selectedRange.commonAncestorContainer.querySelectorAll('a');

        // loop to check if they intersect with the selected range
        for (let i = 0; i < links.length; i++) {
            const anchor = links[i];
            if (selectedRange.intersectsNode(anchor)) {
                href = anchor.getAttribute("href");
                break;
            }
        }
    } else if (document.selection && document.selection.type !== "Control") {
        const range = document.selection.createRange();
        text = range.text;

        // Check if the selection contains any "a" elements
        const anchorElement = range.parentElement();
        if (anchorElement.tagName === "A") {
            href = anchorElement.getAttribute("href");
        }
    }

    if (text) console.log("🚀 ~ getSelectionText ~ text:", text);
    if (href) console.log("🚀 ~ getSelectionText ~ href:", href);

    return text;
}

function getSelectionText() {
    let text = "";
    let href = "";

    if (window.getSelection) {
        const selection = window.getSelection();
        text = selection.toString();
        const selectedRange = selection.getRangeAt(0);
        // find any "a" elements
        const links = selectedRange.commonAncestorContainer.querySelectorAll('a');

        // loop to check if they intersect with the selected range
        for (let i = 0; i < links.length; i++) {
            const anchor = links[i];
            if (selectedRange.intersectsNode(anchor)) {
                href = anchor.getAttribute("href");
                break;
            }
        }
    } else if (document.selection && document.selection.type !== "Control") {
        const range = document.selection.createRange();
        text = range.text;

        // Check if the selection contains any "a" elements
        const anchorElement = range.parentElement();
        if (anchorElement.tagName === "A") {
            href = anchorElement.getAttribute("href");
        }
    }

    if (text) console.log("🚀 ~ getSelectionText ~ text:", text);
    if (href) console.log("🚀 ~ getSelectionText ~ href:", href);

    return text;
}

(note - I swapped the "var" for "let" and "const" but that is just me being pedantic)

emptyOP•9mo ago

I face an issue "selectedRange.commonAncestorContainer.querySelectorAll is not a function"

Chris Bolson•9mo ago

That would seem to indicate that selectedRange isn't defined. Can you share the complete function code? Here is my test incase you want to compare: https://codepen.io/cbolson/pen/NWmeRBO ah, OK, the code also needs to check that "something" is selected on mouseup

emptyOP•9mo ago

So I need to check selection and selectedRange are exist before I access commonAncestorContainer right ? I'm using your code 😅

Chris Bolson•9mo ago

possibly not the best idea - as you have discovered, if the selected text does not contain an href it throws an error.

emptyOP•9mo ago

Ok. But I wonder that when the else if case oucurs? I have tried but never faced that case.

Chris Bolson•9mo ago

The "else" is for (old) browsers that don't support window.getSelection(). You could probably remove it unless you need to support IE or similar.

emptyOP•9mo ago

Ok thanks

Chris Bolson•9mo ago

I got a version of this working, sorry, I forgot to post it here. Work got in the way as usual 😛

emptyOP•9mo ago

How can u check if users are selecting something or not? Can I check base on "isCollapsed" property?

emptyOP•9mo ago

I'm using your code now. But I face a case that it can not get the link

Gaming

Programming

get Text and link (if exists) when users highlight text on screen.

Did you find this page helpful?