Javascript：单击即可使用 window.getSelection()？

Question

In JavaScript, I don't know how to use window.getSelection() with a single click?

var s = window.getSelection();
s = s.toString().trim();
alert(s);

HTML contains:

<p>This text contains --this; and that-that.</p>

If single click on --this; the expected output should be this . Double click should do this well, but how to do this with just a single click?

Thank you very much to all, I come to this solution:

$('p').bind('click', function () {
    var sel_obj = window.getSelection(); //it will return an object
    sel_obj.modify("move","forward","character");
    sel_obj.modify("extend","backward","word");

    sel_obj.modify("move","backward","character");
    sel_obj.modify("extend","forward","word");

    var text = sel_obj.toString().trim();
    text = text.toLowerCase();
    alert (text);

References: https://developer.mozilla.org/en-US/docs/Web/API/Selection

https://developer.mozilla.org/en-US/docs/Web/API/Selection/modify

Detect which word has been clicked on within a text

Answer 1

You need for your javascript code to be triggered by an onclick event.

So inside your p element, set onclick to the name of your js function:

<p onClick="myFunction()">Whatever text here</p>

Where that function is defined as

var myFunction = function(){
    var s = window.getSelection();
    s = s.toString().trim();
    alert(s);
}

Answer 2

Give your this an identifier, then bind a click function:

<p>This text contains <span id="this">--this;</span> and that-that.</p>

$( "#this" ).click(function() {
    var s = window.getSelection();
    s = s.toString().trim();
    alert(s);
});

https://api.jquery.com/click/

For double click, use .dblclick

$( "#this" ).dblclick(function() {
    var s = window.getSelection();
    s = s.toString().trim();
    alert(s);
});

https://api.jquery.com/dblclick/

Answer 3

When you single-click you create a zero-length selection range, so the toString() of the selection is naturally going to be an empty string.

If you want to know the whole word that exists where the single click occurred, you're going to have to dig a bit further into what getSelection() returns: https://developer.mozilla.org/en-US/docs/Web/API/Selection

The Selection object will tell you the node in the DOM tree where that zero-length selection exists, and the offset into that node where you clicked. You could easily get all of the text that belongs to the node -- but that's more text than you want.

What you'd further have to do is look at the text at the selection offset, and scan backward and forward from that point to look for word boundaries.

Sorry I don't know of a less complicated approach than this -- as far as I know there's nothing that's going to give you the whole word at a single-click selection automatically.

Answer 4

This is my implementation, demo here

document.addEventListener('mouseup', (e) => {
    const selection = window.getSelection();
    if (!selection.isCollapsed) {
        console.info("[skipping] Selection detected");
        return;
    }

    const word = getWordAt(selection.focusNode.textContent, selection.focusOffset);
    if (!word) {
        console.info("[skipping] Nothing selected");
        return;
    }

    const range = selection.getRangeAt(0);

    const elementOfSelectedWord = range.startContainer.splitText(range.startOffset - word.offset),
        elementAfterSelectedWord = elementOfSelectedWord.splitText(word.word.length);

    const decoratedElementOfSelectedWord = document.createElement('span');
    decoratedElementOfSelectedWord.appendChild(document.createTextNode(elementOfSelectedWord.textContent));
    elementOfSelectedWord.parentNode.insertBefore(decoratedElementOfSelectedWord, elementAfterSelectedWord);
    elementOfSelectedWord.parentNode.removeChild(elementOfSelectedWord);

    const clientRect = decoratedElementOfSelectedWord.getBoundingClientRect();

    if (!isMousePosCoveredInClientRect(e, clientRect)) {
        console.info("[skipping] Mouse pos is not covered in client rect");
        return;
    }

    drawRedRect(clientRect);

    console.log(`${word.word}`);
})


function getWordAt(content, offset) {
    const matchLeft = content.substr(0, offset).match(/(\w+)$/);
    const left = matchLeft ? matchLeft[1] : "";

    const matchRight = content.substr(offset).match(/^(\w+)/);
    const right = matchRight ? matchRight[1] : "";

    if (!left && !right) {
        return null;
    }

    return {word: left + right, offset: left.length};
}

function isMousePosCoveredInClientRect(event, clientRect) {
    return (
        event.clientY >= clientRect.y &&
        event.clientY <= clientRect.y + clientRect.height &&
        event.clientX >= clientRect.x &&
        event.clientX <= clientRect.x + clientRect.width
    );
}

function drawRedRect(clientRect) { // this is to simulate a popup
    const div = document.createElement('div');
    Object.assign(div.style, {
        display: "block",
        position: "absolute",
        left: (clientRect.left + window.scrollX) + "px",
        top: (clientRect.top + window.scrollY) + "px",
        width: clientRect.width + "px",
        height: clientRect.height + "px",
        border: "1px solid red"
    });

    document.body.appendChild(div);
    setTimeout(() => {
        document.body.removeChild(div);
    }, 1000)
}