Remove all HTML tags inside of selection in contenteditable

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 become:

Hello there. I am a selection

Example 2:

The Selection:

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

would become:

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?



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 completely removed rather than just the selected portion. To fix this would be more tricky.



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);

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 

            // 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++]; ) {

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 compatibility 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.



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


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

Is that what you're looking for?


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

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


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.