JSFiddle - React, Tailwind, and code Playground

by Udit Bhardwaj

HTML

<div id="edit" contenteditable="true">&nbsp;</div>

CSS

div#edit {
    border: lightgreen 1px solid;
    padding: 5px;
}
.facebook {
    background: lightgray;
    color: cornflowerblue;
}
.reddit {
    background: lightblue;
    color: red;
    /*padding-left: 3px;
    padding-right: 3px;*/
}

JavaScript

var t
$('#edit').focus(function (e) {
    var that = $(this);



    t = setInterval(function () {
        that.attr('contenteditable', 'true')
        var onlyDivText = that.clone()
        onlyDivText.children('span').each(function () {
            $(this).remove()
        })

     

        onlyDivText.text(onlyDivText.text().replace(String.fromCharCode(160), " "))

        if (onlyDivText.text().toLowerCase().indexOf("facebook") != -1) {

            var copy = that.html();
            that.empty()

            var copy2 = copy.replace("facebook", "")

            var temp = $("<div id='temp' contenteditable='true'><span class='facebook' contenteditable = 'true'>Facebook </span></div>")
            that.html(copy2).append(temp)

            that.find('#temp').click(function (e) {
                e.stopPropagation()


                var sp = $(this).children('span').detach();

                $(this).replaceWith(sp)

                sp.focus()

                placeCaretAtEnd(sp.get(0))
            });

            that.find('#temp').trigger('click');

        }

            that.children('span').each(function () {
                if ($(this).text().indexOf(String.fromCharCode(160) + ".") != -1) {
                    //console.log('asdasda')
                    $(this).text($(this).text().replace(String.fromCharCode(160) + ".", "."))
                    $(this).parent().append("&nbsp;")

                    placeCaretAtEnd(that.get(0))

                }
            })

         }, 100)
    })

$('#edit').blur(function () {
    window.clearInterval(t);
})

function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof...