I have a <div /> which is contenteditable and can contain several types of HTML elements such as <span />, <a />, <b />, <u /> and so on.

Now when I select text in my contenteditable I would like to have a button that removes all the styles within the selection.

Example 1:

The Selection:

Hello <b>there</b>. I am <u>a selection</u>

would bee:

Hello there. I am a selection

Example 2:

The Selection:

<a href="#">I am a link</a>

would bee:

I am a link

You get the idea...

I have found this helpful function which replaces the current selection with custom text. But I just cannot get the content of the selection first and strip the tags out before replacing it. How can I do that?

I have a <div /> which is contenteditable and can contain several types of HTML elements such as <span />, <a />, <b />, <u /> and so on.

Now when I select text in my contenteditable I would like to have a button that removes all the styles within the selection.

Example 1:

The Selection:

Hello <b>there</b>. I am <u>a selection</u>

would bee:

Hello there. I am a selection

Example 2:

The Selection:

<a href="#">I am a link</a>

would bee:

I am a link

You get the idea...

I have found this helpful function https://stackoverflow./a/3997896/1503476 which replaces the current selection with custom text. But I just cannot get the content of the selection first and strip the tags out before replacing it. How can I do that?

• javascript
• jquery
• wysiwyg
• contenteditable
• rangy

• possible duplicate of Sanitize/Rewrite HTML on the Client Side – Dave Jarvis Commented Sep 30, 2013 at 3:59

4 Answers 4

The way I would do this is to iterate over the nodes within the selection and remove inline nodes (maybe leaving <br> elements alone). Here's an example, using my Rangy library for convenience. It works in all major browsers (including IE 6) but is not quite perfect: for example, it does not split partially selected formatting elements, meaning that a partially selected formatting element is pletely removed rather than just the selected portion. To fix this would be more tricky.

Demo: http://jsfiddle/fQCZT/4/

Code:

var getComputedDisplay = (typeof window.getComputedStyle != "undefined") ?
    function(el) {
        return window.getComputedStyle(el, null).display;
    } :
    function(el) {
        return el.currentStyle.display;
    };

function replaceWithOwnChildren(el) {
    var parent = el.parentNode;
    while (el.hasChildNodes()) {
        parent.insertBefore(el.firstChild, el);
    }
    parent.removeChild(el);
}


function removeSelectionFormatting() {
    var sel = rangy.getSelection();

    if (!sel.isCollapsed) {
        for (var i = 0, range; i < sel.rangeCount; ++i) {
            range = sel.getRangeAt(i);

            // Split partially selected nodes 
            range.splitBoundaries();

            // Get formatting elements. For this example, we'll count any
            // element with display: inline, except <br>s.
            var formattingEls = range.getNodes([1], function(el) {
                return el.tagName != "BR" && getComputedDisplay(el) == "inline";
            });

            // Remove the formatting elements
            for (var i = 0, el; el = formattingEls[i++]; ) {
                replaceWithOwnChildren(el);
            }
        }
    }
}
​

Based on your suggested function, I came up with this neat little script after a little bit of experimenting in the console. Didn't test this for cross browser patibility though!

var selection = window.getSelection().getRangeAt(0);
var selectedText = selection.cloneContents().childNodes[0]; // This is your selected text.

Now, you can strip HTML tags from your selectedText and replace it using the function you already provided in your question.

For example, you could use strip_tags() from the php.js project

I hope this answers your question.

http://jsfiddle/tnyWD/

HTML:

<div class="test">
    Hello <b>there </b><a href="#">I am a link</a>
</div>
<button class="remove">Remove HTML</button>​

JS:

$(document).ready(function(){
    jQuery.fn.stripTags = function() { return this.replaceWith(this.html().replace(/<\/?[^>]+>/gi, '') ); };
$('.remove').click(function(){
    $('.test').stripTags();
});
});​

Is that what you're looking for?

http://jsfiddle/fQCZT/2/

<div contenteditable="true">
    <p>
        Here is some <b>formatted text</b>. Please select some and watch the formatting
        <i>magically disappear</i>.
        <br>
        Look, some more <u>formatted</u> content.
    </p>
    <p>And <i>another</i> paragraph of it</p>
</div>
<button onmousedown="removeSelectionFormatting()">Change</button>​

It is duplicate of one of the above answers but with a button to change text!