window.getSelection() gives me the selected text, but I want the HTML

Question

I'm extending a WYSIWYG HTML editor (for Firefox), I want to add tags around a selection. I can't find a function to accomplish this in the Mozilla Midas specification.

There is a command to replace the selection with HTML.
So if I could read the selection contents, I could add my tags to this string.

window.getSelection() almost works, but it gives me nsISelection which converts to a plain-text string.

PS: document.getSelection() returns the plain-text string not even a nsISelection.

Bashuk

I suggest that you take a look at some (well-developed) WYSIWYG htmleditor - tinymce, for example - to figure it out. :) – Pearly

Hey Bob Fanger did u find any solution for this.If u have can u just tell me. – Herrle

Nope, we switched to TinyMCE, which solved the (business) problem. PS. TinyMCE has a great api for extending their htmleditor. You could check the implementation of wiki.moxiecode.com/index.php/TinyMCE:API/tinymce.Editor/… – Bashuk

Answer 1

Take a look at the DOM Range spec. You can get a Range from the user selection in Firefox using:

var range = window.getSelection().getRangeAt(0);

Note that some browsers, including Firefox, allow multiple selections, which can be accessed via the getRangeAt() method of the selection.

The Range is expressed in terms of DOM nodes and offsets within those nodes. Once you've got your Range, it's not straightforward to do exactly what you want, since the range's boundaries could be in different nodes at different levels of the DOM tree, so simply surrounding the Range's content with a tag is not always possible. You may be able to do something like the following, although it will create a new block element to contain the selected content:

var range = window.getSelection().getRangeAt(0);
var selectionContents = range.extractContents();
var div = document.createElement("div");
div.style.color = "yellow";
div.appendChild(selectionContents);
range.insertNode(div);

Another, hacky, alternative is to use the execCommand() method of document to modify the selection (e.g. by setting it to a particular colour) and then using document.querySelectorAll or some selector library to select elements with that colour and then apply styling to them.

Futurity

there's a minor typo on the last line, you need to s/span/div/ – Independency

@tim problem is that if I will try to extract start and end from range object this is not returning exact position which is giving me through window.getSelection() object.. any way to get and if I use both then window.getSelection().getRangeAt(0) range start and end overrides the window.getSelection() object start and end value. any way for more please follow this link I have posted here #42114194 – Hildehildebrand

This made my day :) Thanks @TimDown – Perfusion

Answer 2

Tim Down's answer is on the right track. However one issue is that extractContents() will remove the selection from the dom. You can use

window.getSelection().getRangeAt(0).cloneContents(); 

to just get a copy of what's selected. You could then wrap that with your new tag and then replace the selection with it. Tim Down's concern about the range spanning multiple HTML elements is certainly a valid one. I think once you get the range, it 'fixes' up the html, but when you put it back in it could cause problems. Here's a good resource on the Range object.

Refute

I hadn't quite finished when I posted. I've now completed my answer. Using extractContents was deliberate since you need to remove the content from the document before reinserting it. – Futurity

Yeah, I figured there would be a pretty nice way to use extractContents to solve this, I just thought I should point out that it's 'destructive' and there's another method to get the selected html. Anyway, good answer, +1. – Refute

Answer 3

window.getSelection() will return an object. You can use the returned selection object as a string by calling the objects .toString() method.

var selObj = window.getSelection();
var selectedText = selObj.toString(); 

https://developer.mozilla.org/en/DOM/window.getSelection

Inositol

Old answer, but returns a bare string, without the markup. I've tested with alert(). – Bethune

Answer 4

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>select content of particular element</title>
</head>

<body>
    <div id="div">This is the div tag</div>
    <p>this is the paragraph</p>
    <button id="Btn">Button</button>
    <script>
        let Btn = document.getElementById("Btn");
        Btn.addEventListener("click", function () {
            let selection = document.getSelection();
            if (selection.anchorNode.parentElement.id == "div") {
                let selectionContents = document.getSelection().toString();
                console.log("selected content of div id :", selectionContents)
            }
            else{
                console.log("pls select some text")
            }
        })
    </script>
</body>

</html>

Arborescent