JSFiddle - React, Tailwind, and code Playground

by kigorw

HTML

<div class="gmail_quote">On 8 September 2011 20:14, AJ Gerritson <span dir="ltr">&lt;[email protected]&gt;</span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex;"><p style="margin-top:0px;margin-bottom:0px;color:#2e2e2e;font-family:Arial, Helvetica, sans-serif;text-align:left;font-size:11pt" align="left"><span style="color:#4e4e4e">Greetings!, &nbsp;</span></p>
<p style="margin-top:0px;margin-bottom:0px;color:#2e2e2e;font-family:Arial, Helvetica, sans-serif;text-align:left;font-size:11pt" align="left"><span style="color:#4e4e4e">&nbsp;</span></p>
<p style="margin-top:0px;margin-bottom:0px;color:#2e2e2e;font-family:Arial, Helvetica, sans-serif;text-align:left;font-size:11pt" align="left"><span style="color:#4e4e4e">On behalf of the entire 451 Marketing Team, I would like to extend an invitation to our FREE workshop and networking breakfast,&nbsp;<a style="color:rgb(0, 26, 129);text-decoration:underline" href="http://r20.rs6.net/tn.jsp?llr=7f6asxbab&amp;et=1107499951938&amp;s=38062&amp;e=001s31GiaovZNOo60b5y0qc5-ml-4e7iwLMNtrSGclRn_uigO6RKp8iDk96ithjgrFQFyslAIIGGcz052c3OtPwYnkmqgHuhOCo19Y2ZOvaDQ6ho_QzfRCdnBa1EgxDcEnqxdRO2KFcst8=" shape="rect" target="_blank">"Managing a Crisis in Today's Digital World"</a>&nbsp;&nbsp;at The Westin Copley Place. &nbsp;</span></p>
<p style="margin-top:0px;margin-bottom:0px;color:#2e2e2e;font-family:Arial, Helvetica, sans-serif;text-align:left;font-size:11pt" align="left"><span style="color:#4e4e4e">&nbsp;</span></p>
<p style="margin-top:0px;margin-bottom:0px;color:#2e2e2e;font-family:Arial, Helvetica, sans-serif;text-align:left;margin-left:60px;font-size:11pt" align="left"><span style="color:#4e4e4e"><strong>When</strong></span></p>
<div style="font-size:11pt;font-family:Arial, Helvetica, sans-serif;text-align:left;margin-left:60px" align="left"><span style="color:#4e4e4e">September 22nd, 2011 from 8:00-10:00 AM</span></div>
<p...

JavaScript

whitespace = /^\s*$/;

function S4() {return (((1+Math.random())*0x10000)|0).toString(16).substring(1);}
function guid () {        
    return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}   
function txt(_el) {return _el.textContent.replace(/\s/g," ");}

    
function isBlock(node) {
    var style = node._computedStyle || window.getComputedStyle(node, null); 
    node._computedStyle = style;
    var tagName = node.tagName.toLowerCase();
    var display = style.getPropertyValue("display");
    if(display=="block") return true;
    
    return ["table-row", "table","div", "p", "blockquote", "br", "body", "tr", "table"].indexOf(tagName)!=-1

     
};  


function isLineBreak(node) {
   var block = isBlock(node);
   var firstChild = node.parentNode.firstChild;
   var firstChildEmpty = firstChild.nodeType==3 && whitespace.test(firstChild.nodeValue) && firstChild.nextSibling==node;
   var isFirstChildOfBlock = (node==firstChild || firstChildEmpty) && isBlock(node.parentNode);
   var result = !isFirstChildOfBlock && block && node!=document.body && node.previousSibling.tagName!="BR";
    return result;
}

function getText() {
   return parse(document.body, true).join(""); 
}

function parse(node, onlyText) {
    var result = [], pos = 0;
    
    
    function getTextNodes(node) {
        if (node.nodeType == 3) {
            if(!whitespace.test(node.nodeValue)) {
                var tag = txt(node);
                if(!onlyText) {
                    tag = createTag(node);
                    tag.pos = pos;
                    pos+= tag.w;
                }  
                result.push(tag);
            }
        } else {

            
            if(isLineBreak(node)) {
                pos++;/*brArr.push(node); textNodes.push("new line"); breaks++;*/
                if(onlyText) result.push("\n");
            }
            
            for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                  getTextNodes(node.childNodes[i]);
    ...