Color certain characters in string

I have a string in a textarea like below.

enter image description here

I want to give the text between the *del* and */del* a red background and the text between *ins* and */ins* a green background. There could be multiple instances of this.

The text populating the textarea is coming from a CSS file and I obtain it using a JSON call like below:

function CallWebService(CSSFile) {

        var webMethod = "../services/BrokerAdmin/CSSComparison.asmx/GetFileContents";

        $.ajax({
            type: "POST",
            async: false,
            url: webMethod,
            data: JSON.stringify({ CSSFile: CSSFile }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
            },
            error: function (e) {
                alert("Error = " + e.responseText);
            },
            complete: function (msg) {
                if (JSON.parse(msg.responseText).d.toString() != "" || JSON.parse(msg.responseText).d.toString() != null) {
                    $('#ctl00_BodyContent_elm2').val(JSON.parse(msg.responseText).d.toString());
                    $('#ctl00_BodyContent_hdfRevertToCSS').val(JSON.parse(msg.responseText).d.toString());

                }
                else if (JSON.parse(msg.responseText).Message.toString() == "" || JSON.parse(msg.responseText).d.toString() == null) {
                    alert("Nothing in CSS file.");
                }
                else {
                }
            }
        });

    }

I have tried to put this string in to a contenteditable <div> but I have only been able to get it showing as one continuous string or as a string containing the escape characters /rn – I don’t want to see these – I want to see a new line taken.


Source: html

Leave a Reply