How can I get the user to select a range in text?

Question

Let's say I'm making a site like wikipedia, where users can put [citation needed] on pieces of text that they think need citations. My basic solution would be to make every sentence into a link, and when clicked, it would put a [citation needed] after it.

But I don't like that solution, because it works at sentence-level. If a user wants to [citation needed] multiple sentences, or maybe part of a sentence, it wouldn't work. So I'm thinking, it would be cool if I could have the user select an arbitrary range, like they would in a normal text editor.

I have one extra constraint: the user cannot edit the text. I can't even let them think they can edit the text, so I'd rather avoid and if I can. It's weird, I know.

I'd imagine it's possible because google docs does it, but I'm not sure. Is this even possible? Is it possible outside of a textarea? What are my options here?

Thanks!

Answer 1

You can set a format like(if you allow to edit):

This is my paragraph.[This contains almost 100 characters][citation needed].

so square bracket will represent this range need the citation.

or you can get the user selected text and format it accordingly like:

See here for working jsFiddle

function getSelectionText() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    alert(html);
}

Code taken from Tim Down: Return HTML from a user-selected text