JSFiddle - React, Tailwind, and code Playground

by jotarkon

HTML

<div id="dataM">
<div id="btn">Project Planning</div>
<p><em><span style="font-size: 85%;">(edit the page, provide answers below each question)</span></em></p>
<p><em>&nbsp;</em></p>
<p><span style="color: #0009b1;">Who are the members of our team?&nbsp;&nbsp;&nbsp; What are our strengths and interests?</span></p>
<p>we knew we would</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span style="color: #0009b1;">What roles do we need for our team?&nbsp;&nbsp; How will we decide who will fill each role?</span></p>
<p>of course we could</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span style="color: #0009b1;">What tasks will each team member perform?</span></p>
<p>any time of the day</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span style="color: #0009b1;">What happens if a team member is not meeting expectations?</span></p>
<p>kill him!</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span style="color: #0009b1;">What is our goal for this project?</span></p>
<p>&nbsp;</p>
<p>the only way to stay</p>
<p>&nbsp;</p>
<p><span style="color: #0009b1;">What tasks must be accomplished and deadlines for each?</span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span style="color: #0009b1;">How will member contribute?</span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span style="color: #0009b1;">How will we ensure quality of our deliverables?</span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span style="color: #0009b1;">How will we evaluate our progress throughout the project?</span></p>    
    
</div>

JavaScript

function processPageData(dataM) { // do some special filtering - individual questons for imse 3810 12 subQuestions max
    if (dataM.indexOf('<span style="color: #0009b1;">') > -1) {
        var mD = dataM.split('<p><span style="color: #0009b1;">');
        for (var i = 0; i < mD.length - 1; i++) {
            var mE = mD[i + 1].split('</span></p>');
            //pageOut += escape(mE[1]) + '\t';
            mE[1] = mE[1].replace(/[\s\r\n]+$/, '');
            mE[1] = mE[1].replace(/<p>&nbsp;<\/p>/ig, '');
            mE[1] = mE[1].replace(/<p> <\/p>/ig, '');
            mE[1] = mE[1].replace(/<p><\/p>/ig, '');
           // mE[1] = mE[1].replace(/<.*p>/ig, '');­ //<<<< this line
            mE[1] = mE[1].replace(/<\/p>/ig, '/r/n');
            pageOut += mE[1] + '/t<br />';


        }
    }
}

var pageOut = "";

$('#btn').bind('click', function() {
    alert('hello');
    var pageData = $('#dataM').html();
    alert(pageData);
    processPageData(pageData);
    alert(pageOut);
    $('#dataM').html('<pre>' + pageOut + '</pre>');
});