JSFiddle - React, Tailwind, and code Playground

by andrelaszlo

HTML

<div class="test" id="1">
	<div>hello</div>
    <div>world</div>
</div>
<div class="test" id="2"><span>foo</span><span>bar</span></div>
<div class="test" id="3"><span>foo</span>     <span>bar</span></div>
<div class="test" id="4"><span>foo</span>
<span>bar</span></div>
<div class="test" id="5">space: |
nbsp entity:&nbsp;|
tab:	|
nbsp char: |</div>
<div class="test" id="6"><!-- jQuery example -->
  <div class="demo-box">Demonstration Box</div>
  <ul>
    <li>list item 1</li>
    <li>list <strong>item</strong> 2</li>
  </ul>
</div>
<div id="output"></div>

CSS

.test {
    display: none;
}
pre {
    font-size: 1.5em;
    margin: 0;
    background-color: #ddd;
}
pre:nth-child(3n-1) {
    background-color: #eee;
}
pre:nth-child(3n-2) {
    margin-top: 5px;
    font-size: 2em;
    background-color: #fff;
}

JavaScript

var log = function(txt) {
    txt = txt.replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/\t/g, '   →')
        .replace(/\xa0/gm, '_');
    var $out = $('#output');
    $out.html($out.html() + "<pre>" + txt + "</pre>");
}

$('.test').each(function(i, e) {
    log('test ' + $(e).attr("id"));
    log($(e).html());
    log(JSON.stringify($(e).text()));
});