OeOEOEOEOEOE

by George Y

HTML

<strong>Initial Text</strong>
<br>
<br>
<span id="yo" data-editableproperty="text"><span style="font-family: Open Sans;"><span style="font-style: italic;"><span style="font-weight: 700;">fdsfdsfdsfsdfdsfds</span></span>
</span>
<br>Hello World
<br><strong>What is up world?</strong>
<br><u style="font-weight:700">wow this is a u style font weight!!!</u>
<br>
<div style="text-align: left;"><u><span style="color: rgba(232,0,0,1);"><span style="font-family: Open Sans;"><span style="font-weight: 600;">Everything</span></span></span></u> is <span style="font-family: Open Sans;"><span style="font-weight: 600;">good world?</span></span>
</div>Really?
<br>
</span>
<br>
<br>
<strong>Initial HTML</strong>
<div id="initial-html">
</div>
<br>
<br>
<hr/>
<strong>After Text</strong>
<div id="after-text">
</div>
<br>
<br>
<strong>After HTML</strong>
<div id="after-html">
</div>

JavaScript

var text = $('#yo').html()
$('#initial-html').text(text)
var style = 'bold'

stipItYo(text, style);

function stipItYo(text, style) {

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

  var mappingsOfStyledWithRegexForTag = {
    'bold': /(<\/strong>)|(<strong)/gi,
    'italic': [/(<\/em>)|(<em)/gi, /(<\/span>)|(<span)/gi],
    'underline': [/(<\/u>)|(<u)/gi, /(<\/span>)|(<span)/gi],
    'color': /(<\/span>)|(<span)/gi,
    'letter-spacing': /(<\/span>)|(<span)/gi,
    'line-height': /(<\/span>)|(<span)/gi,
    'font-size': /(<\/span>)|(<span)/gi,
    'font-family': /(<\/span>)|(<span)/gi,
    'text-align': /(<\/div>)|(<div)/gi
  }

  var extraCheckMappings = {
    'bold': '<strong'
  }

  //var fontSizeRegex = /(<span [^>]*font-size[^>]*>)/gi;
  var myRegex = mappingsOfStyledWithRegex[style]
  var tagsRegex = mappingsOfStyledWithRegexForTag[style]

  var matches = [];
  var toRemove = [];
  var res, count, styleMatch;

  if (style == 'bold') {
    var fontWeightRegex = /[<span|<u|<em|<div]\s+[^>]*?\s*style\s*=\s*(?:\'|")(?:\S+\s+)?(font-weight(?:\s+\S+)?\1[^;"]*;?)/gi;
     while ((m =...