jQuery: how to wrap selected text

user2571510

I would like to use the below function to get the currently selected text (source: javascript replace selection all browsers).

In my case I don't want to replace the selected text but instead would like to add something before and after it, mainly HTML tags (by click on a button).

Example: Selected text = Hello New text (html) = <u>Hello</u>

Code to get selected text:

  function replaceSelection(html) {
        var sel, range, node;

        if (typeof window.getSelection != "undefined") {
            // IE 9 and other non-IE browsers
            sel = window.getSelection();

            // Test that the Selection object contains at least one Range
            if (sel.getRangeAt && sel.rangeCount) {
                // Get the first Range (only Firefox supports more than one)
                range = window.getSelection().getRangeAt(0);
                range.deleteContents();

                // Create a DocumentFragment to insert and populate it with HTML
                // Need to test for the existence of range.createContextualFragment
                // because it's non-standard and IE 9 does not support it
                if (range.createContextualFragment) {
                    node = range.createContextualFragment(html);
                } else {
                    // In IE 9 we need to use innerHTML of a temporary element
                    var div = document.createElement("div"), child;
                    div.innerHTML = html;
                    node = document.createDocumentFragment();
                    while ( (child = div.firstChild) ) {
                        node.appendChild(child);
                    }
                }
                range.insertNode(node);
            }
        } else if (document.selection && document.selection.type != "Control") {
            // IE 8 and below
            range = document.selection.createRange();
            range.pasteHTML(html);
        }
    }

Code to call function:

replaceSelection('<span><font color="red">hoho</font></span>');

Can someone tell me how i can achieve this by modifying the above ?

Many thanks for any help with this, Tim.

rybo111

jQuery's append() and prepend() should do the trick.

$(".my-span").prepend("<u>").append("</u>");

HTML:

<div>
  <span class="my-span">Hello</span>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Wrap with span if text is selected

From Dev

How to wrap text nodes with mixed <a> tags with jQuery?

From Dev

Notepad++: How to wrap selected text in brackets, parenthesis, quotes?

From Dev

How to wrap a html tag around a text selected in an input?

From Dev

How Do I wrap only selected elements in jQuery

From Dev

In jquery How to get selected text in select

From Dev

How to change the selected text value in jquery multiselect

From Dev

get selected="selected" text with jquery

From Dev

Wrap selected text with Select2

From Dev

How to wrap LI tag text for mobile version without js/jquery

From Dev

How to wrap text in textblock?

From Dev

How to wrap text menu

From Dev

How to wrap text in css

From Dev

How to wrap text in textblock?

From Dev

How to wrap text in Dialog

From Dev

How to wrap Text in showModalBottomSheet?

From Dev

Width of selected text - jquery

From Dev

Wrap multiple selected elements with a div with jquery

From Dev

jQuery wrap text without container

From Dev

Input Field text wrap with jQuery

From Dev

Wrap text inside of an element with jQuery

From Dev

How to wrap the jQuery function

From Dev

How to send a selected element and a text input via jQuery

From Dev

Jquery - how to copy selected text from div tag?

From Dev

JQUERY: How to tag selected text using textbox as tooltip

From Dev

How to re-select the selected text in textarea by using javascript/jQuery?

From Dev

JQUERY: How to tag selected text using textbox as tooltip

From Dev

How to truncate only selected text of dropdown using jquery

From Dev

How can I alert a text when an option is selected in jquery?

Related Related

HotTag

Archive