JSFiddle - React, Tailwind, and code Playground

by Amitabha Ghosh

HTML

<textarea id= "ta" value=""></textarea>
<span id="sm"></span>

<!--<script src="https://rawgit.com/leizongmin/js-xss/master/dist/xss.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.8/purify.min.js"></script>
<!--<script>
  
  var textArea = document.querySelector("#ta");
  var sm = document.querySelector("#sm")
  textArea.addEventListener("input",function(e){
  var val = e.target.value;
   var html = filterXSS(val);
    console.log(html);
    console.log(val)
    sm.innerHTML = html;
  })
 
</script>-->

<script>

function sanitizeAndProcessForDisplay(htmlContent) {
   
    let sanitizedContent = DOMPurify.sanitize(htmlContent);
    sanitizedContent = sanitizedContent.replace(/<img[^>]*?src=["']?["']?[^>]*?>|<svg.*?<\/svg>/gis, '');

    return sanitizedContent;
}

  
  var textArea = document.querySelector("#ta");
  var sm = document.querySelector("#sm")
  textArea.addEventListener("input",function(e){
  var val = e.target.value;
   var html = DOMPurify.sanitize(val);
    console.log(html);
    console.log(val)
    sm.innerHTML = html;
    const proceesContent = sanitizeAndProcessForDisplay(sm);
    sm.innerHTML = proceesContent;
    
  })
 
</script>