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

Question

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

Answer 1

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,'"');
    returnvalue = returnvalue.replace(/\'/g,''');
    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.