How to change font style of window.getSelection()

Question

I want to know how can I change the font style of the selected text, using window.getSelection(), after clicking in a button.

For example, supose that we have the following phrase:

Hello world!

If I just select the string ell from it and after that, click in a button, it will return (in this case, for example, bold type):

Hello world!

So, how could I do that? My main problem is: what variable type should I convert the window.getSelection() to change the font style, because it returns a object, and if I did .toString(), it won't help very much.

Are you using an `contenteditable` element? – zer00ne Jun 17 '19 at 02:02 — zer00ne, Jun 17 '19 at 02:02

score 4 · Accepted Answer · answered Jun 17 '19 at 02:05

function surroundSelection() {
        var span = document.createElement("span");
        span.style.fontWeight = "bold";
        span.style.color = "black";

        if (window.getSelection) {
            var sel = window.getSelection();
            if (sel.rangeCount) {
                var range = sel.getRangeAt(0).cloneRange();
                range.surroundContents(span);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    }

<input type="button" onclick="surroundSelection()" value="Surround">
    <div contenteditable="true">Hello World</div>

Thanks, that was what I'm looking for! – Grandtour Jun 17 '19 at 11:46 — Grandtour, Jun 17 '19 at 11:46

score 0 · Answer 2 · answered Jun 17 '19 at 01:39

0

You are looking to surround the highlighted text into a new node that you add new style to. Check out this answer How To Wrap / Surround Highlighted Text With An Element

answered Jun 17 '19 at 01:39

Pablo

5,897
7
34
51

How to change font style of window.getSelection()

2 Answers2