删除未关闭的html标记 - 将内容粘贴到具有contenteditable的div

I am struggling here to find a solution to using

div using contenteditable

PHP

<div class="panel-body">
 <div contenteditable="true" style="text-align: justify" id="text_data_1">
    <?php echo(html_entity_decode($text_data_from_backend))?>
 </div>                   
</div>

jQuery

 var postFormData =  {
    'agent_id'              : $("#text_data_1").val(),                  
    'actionmode'            : id
    };
 var link = 'myfile.php';
$.fn.getajaxresponse(link,  postFormData, $.fn.this_callback);

Data is pasted or typed into the div which is contenteditable. The whole html layout fails when end users paste content from websites with tags that are not closed properly.

I am using div contenteditable so that new lines and basic html tags are preserved and can be transacted back and forth to database.

Is there a way to remove html tags that are not closed properly and I believe this is the show stopper in getting this methodology in place. Please note I use jQuery, PHP and MySQL

Thank you for your responses.

It was a bit tricky one and on searching I found a library where jQuery cleaned up without using regex

  1. I attached an editor called Trumbowyg to the div - http://alex-d.github.io/Trumbowyg/ It was quite easy and cool. This one is lightweight and and requires to add the js file to the required page.
  2. On saving via ajax, called a function where JClean [https://code.google.com/archive/p/jquery-clean/] library is used to clean the unclosed tags. Add the Jclean js file to the required page

This is how I did it eventually.

  1. Attaching editor

    $.fn.attach_event_div_contenteditable = function(){                  
   var tb_buttons = [                     
                      ['viewHTML'],
                      ['formatting'],
                      'btnGrp-semantic',
                      ['superscript', 'subscript'],
                      ['link'],
                      'btnGrp-justify',
                      'btnGrp-lists',
                      ['horizontalRule'],
                      ['removeformat'],
                      ['fullscreen']
                     ];
   $('#text_data_1').trumbowyg({
       removeformatPasted: true,
       btns: tb_buttons,
       height:"100%",
   });
   $('#text_data_2').trumbowyg({
       removeformatPasted: true,
       btns: tb_buttons,
   });  
   $('#text_data_3').trumbowyg({
       removeformatPasted: true,
       btns: tb_buttons,
   });
   $('#text_data_4').trumbowyg({
       removeformatPasted: true,
       btns: tb_buttons,
   });         
}

  2. Cleaning elements

    $.fn.get_latest_value = function(elem){
 var tagname = elem.prop("tagName");
 var returnvalue = "";
 switch(tagname.toUpperCase()){
    case "TEXTAREA": 
        returnvalue = elem.val();break;
    case "INPUT": 
        returnvalue = elem.val(); break;                
    default:
        returnvalue = elem.html();break;
 }
 returnvalue = returnvalue.replace(/\"/g,'&quot;');
 returnvalue = returnvalue.replace(/\'/g,'&apos;');
 var temp = $("<input value='"+returnvalue+"'/>");
 returnvalue = $.htmlClean(temp.val(), { format: true });
 return returnvalue;
}

Ajax call

 var postFormData =  {
  'agent_id'              : $.fn.get_latest_value($("#text_data_1")),                  
  'actionmode'            : id
  };
 var link = 'myfile.php';
 $.fn.getajaxresponse(link,  postFormData, $.fn.this_callback);

This is the best I could find as an answer and went ahead. Hope this helps to anyone who wondered how I fixed it.