Escaping “<” character and the contents inside it using jquery or javascript

Question

The user can select a part of text and can apply styles such as font color, underline etc. The HTML content will be saved in the database in as it was created to maintain the formatting and will be displayed in the client's device as such it was saved. The problem I'm facing here is that how I can allow contents like shown in the image, <Test> is not an html tag but the browser pretends it is one and hides it from viewing also other texts such as look here >> hello also generates problems. Any solution? Here is the client code that will be displayed and by the way I'm using jQuery text editor .

function NormalPopup(msg,createDate,okMethodName,deleteMethodName,messageId,roomNumber,type,signature, msgStatusFlag){
    msg = replaceMsg(msg);
    document.getElementById('overlay').style.display='block';
    document.getElementById('modal').style.display='block';
    document.getElementById('modal').innerHTML="";
    var divHtml="";
    var buttonName="";
    if(msgStatusFlag=="0" && $("#strong"+messageId).html()!=null)
        buttonName = "Save";
    else
        buttonName = "Close";
    divHtml="<div align='center'><div align='justify' class='divContent'><table align='top' cellspacing='10' cellspacing='10'  width='100%' height='100%'>";
    divHtml=divHtml+"<tr>";
    divHtml=divHtml+"<td align='left' >";
    divHtml=divHtml+"<div id='standard1' class='alertDivTable alertContent'>"+msg+"</div><br>";
    divHtml=divHtml+"</td>";
    divHtml=divHtml+"</tr>";
    divHtml=divHtml+"<tr>";
    divHtml=divHtml+"<tr><td align='left'><div style='text-align:left;'>"+signature+"</div></td></tr>";
    divHtml=divHtml+"<tr>";
    divHtml=divHtml+"<td><table width='100%'><tr><td align='left' width='50%' ><div style='text-align :left;'>"+createDate+"</div></td><td align='right'><div class='alertBoxBtn' align='right'> " +
            "<table width='100%' height='100%' cellpadding='5' cellspacing='8'><tr><td align='center' valign='middle' class='button_td deleteBtn' id='deleteBtn' " +
            "onclick='javascript:closePopup("+deleteMethodName+",\""+messageId+"\",\""+roomNumber+"\",\""+type+"\")'><div>Delete</div></td><td align='center' valign='middle' class='button_td deleteBtn'  " +
            "id='okBtn' onclick='javascript:closePopup("+okMethodName+",\""+messageId+"\",\""+roomNumber+"\",\""+type+"\")' ><div>" +
            buttonName+"</div></td></tr></table></div></td></tr></table></td>";
    divHtml=divHtml+"</tr>";
    divHtml=divHtml+"</div></div></table>";
    document.getElementById('modal').innerHTML =divHtml;

    if(document.getElementById("standard1").scrollHeight>=250){
        document.getElementById("modal").style.top="42%";
        document.getElementById("standard1").style.height='250px';
        document.getElementById("standard1").innerHTML="<div class='scroller' >"+document.getElementById("standard1").innerHTML+"</div>";
        new iScroll('standard1',{ hideScrollbar:false,fixedScrollbar:true,bounce:false });
    }
    else if(document.getElementById("standard1").scrollHeight>=51 && document.getElementById("standard1").scrollHeight<250){
        document.getElementById("modal").style.top="47%";
    }
    else{
        document.getElementById("modal").style.top="52%";
    }
    new NoClickDelay(document.getElementById("deleteBtn"));
    new NoClickDelay(document.getElementById("okBtn"));
}

The message will be displayed using this code

divHtml=divHtml+"<div id='standard1' class='alertDivTable alertContent'>"+msg+"</div><br>"; 

Answer 1

Have you tried using the backslash character "\\" before the character you are trying to escape? Usually, the backslash is used for escaping characters. In this case, that would be "\\"