JSFiddle - React, Tailwind, and code Playground

by George Y

HTML

<strong>Input HTML:</strong>
<div class='input'>

</div>
<br>
<br>
<strong>Output HTML:</strong>
<div class='output'>

</div>
<br>
<br>
<div class="worker">

</div>

JavaScript

var text = 'Hello <span style="color:#cccccc">World</span> <span style="font-size:30px">Yo dude How are you?<span>oLALLALAL</span>Yoyoyo</span>';
var style = 'font-size';

$('.input').text(text);

stripStyle(text, style);

function stripStyle(text, style) {
  var _mappingsOfStyledWithRegex = {
    'bold': /(<strong>)[\s\S]*?(<\/strong>)/gi,
    'italic': /(<em>)[\s\S]*?(<\/em>)/gi,
    'underline': /(<u>)[\s\S]*?(<\/u>)/gi,
    'color': /(<span\s+[^>]*?\s*style\s*=\s*(?:\'|")(?:\S+\s+)?color(?:\s+\S+)?\1[^>]*>)[\s\S]*?(<\/span>)/gi,
    'letter-spacing': /(<span\s+[^>]*?\s*style\s*=\s*(?:\'|")(?:\S+\s+)?letter-spacing(?:\s+\S+)?\1[^>]*>)[\s\S]*?(<\/span>)/gi,
    'line-height': /(<span\s+[^>]*?\s*style\s*=\s*(?:\'|")(?:\S+\s+)?line-height(?:\s+\S+)?\1[^>]*>)[\s\S]*?(<\/span>)/gi,
    //'font-size': /(<span\s+[^>]*?\s*style\s*=\s*(?:\'|")(?:\S+\s+)?font-size(?:\s+\S+)?\1[^>]*>)[\s\S]*?(<\/span>)/gi,
    //'font-size': /(<span\s+[^>]*?\s*style\s*=\s*(?:\'|")(?:\S+\s+)?font-size(?:\s+\S+)?\1[\s\S]*?[^/]*$)/gi,
    'font-size': /<span\s+[^>]*?\s*style\s*=\s*(?:\'|")(?:\S+\s+)?font-size:[^>]*>/i,
    'font-family': /(<span\s+[^>]*?\s*style\s*=\s*(?:\'|")(?:\S+\s+)?font-family(?:\s+\S+)?\1[^>]*>)[\s\S]*?(<\/span>)/gi,
    'text-align': /(<p\s+[^>]*?\s*style\s*=\s*(?:\'|")(?:\S+\s+)?text-align(?:\s+\S+)?\1[^>]*>)[\s\S]*?(<\/p>)/gi
  };

  /* var _mappingsOfStyledWithRegexB = {
     'bold': /(<strong>)[\s\S]*?(<\/strong>)/gi,
     'italic': /(<em>)[\s\S]*?(<\/em>)/gi,
     'underline': /(<u>)[\s\S]*?(<\/u>)/gi,
     'color': /(color:.*;)/gi,
     'letter-spacing': /(<span\s+[^>]*?\s*style\s*=\s*(?:\'|")(?:\S+\s+)?letter-spacing(?:\s+\S+)?\1[^>]*>)[\s\S]*?(<\/span>)/gi,
     'line-height': /(<span\s+[^>]*?\s*style\s*=\s*(?:\'|")(?:\S+\s+)?line-height(?:\s+\S+)?\1[^>]*>)[\s\S]*?(<\/span>)/gi,
     'font-size': /(<span\s+[^>]*?\s*style\s*=\s*(?:\'|")(?:\S+\s+)?font-size(?:\s+\S+)?\1[^>]*>)[\s\S]*?(<\/span>)/gi,
     'font-family':...