<html>
<head>
<title>Javascript RegEx Multiline - RJM Programming - February, 2019 ... thanks to https://stackoverflow.com/questions/49209362/what-is-the-meaning-of-s-s-gm-in-javascript and https://www.w3schools.com/jsref/met_document_execcommand.asp</title>
<script type='text/javascript'>

function bold_all(ibut) {
document.designMode="on";
document.execCommand(ibut.value.toLowerCase(),true,('' + ibut.title));
}

function myTrimNonMultiline(x) {
return x.replace(/^\s+|\s+$/g,'');
}

function myTrim(x) {
return x.replace(/^\s+|\s+$/gm,'');
}

function myTrimNonMultilineDiv(x) {
var xx=x.replace(/\<br\>/gm,String.fromCharCode(10)).replace(/\ \;/g,' ').replace(/^\s+|\s+$/g,'').replace(/\ /g,' ');
while (xx.indexOf(String.fromCharCode(10)) != -1) {
xx=xx.replace(String.fromCharCode(10),'<br>');
}
return xx;
}

function myTrimDiv(x) {
var xx=x.replace(/\<br\>/gm,String.fromCharCode(10)).replace(/\ \;/g,' ').replace(/^\s+|\s+$/gm,'').replace(/\ /g,' ');
while (xx.indexOf(String.fromCharCode(10)) != -1) {
xx=xx.replace(String.fromCharCode(10),'<br>');
}
return xx;
}

function populate(tao) {
var tva=tao.value;
while (tva.indexOf(String.fromCharCode(10)) != -1) {
tva=tva.replace(String.fromCharCode(10),'<br>')
}
while (tva.indexOf(' ') != -1) {
tva=tva.replace(' ', ' ')
}
document.getElementById('regexm').value=myTrim(tao.value);
document.getElementById('regexnonm').value=myTrimNonMultiline(tao.value);
document.getElementById('dbasis').innerHTML=tva;
document.getElementById('dregexm').innerHTML=myTrimDiv(tva);
document.getElementById('dregexnonm').innerHTML=myTrimNonMultilineDiv(tva);
}

function dpopulate(tao) {
var tva=tao.innerHTML;
while (tva.indexOf('<br>') != -1) {
tva=tva.replace('<br>', String.fromCharCode(10))
}
while (tva.indexOf(' ') != -1) {
tva=tva.replace(' ', ' ')
}
document.getElementById('regexm').value=myTrim(tva);
document.getElementById('regexnonm').value=myTrimNonMultiline(tva);
document.getElementById('basis').value=tva;
document.getElementById('dbasis').innerHTML=tao.innerHTML.replace(/\ /g,' ');
document.getElementById('dregexm').innerHTML=myTrimDiv(tao.innerHTML);
document.getElementById('dregexnonm').innerHTML=myTrimNonMultilineDiv(tao.innerHTML);
//alert(tao.innerHTML);
}

function tatodiv(tv) {
if (tv != '') {
//document.getElementById('trdiv').innerHTML=document.getElementById('trdiv').innerHTML.replace(/\ /g,' ');
//alert(document.getElementById('trdiv').innerHTML);
document.getElementById('trdiv').style.display='table-row';
document.getElementById('trta').style.display='none';
document.getElementById('dbasis').setAttribute('contenteditable',true);
} else {
document.getElementById('trta').style.display='table-row';
document.getElementById('trdiv').style.display='none';
}
}
</script>
</head>
<body onload="populate(document.getElementById('basis')); dpopulate(document.getElementById('dbasis'));">
<h1>Javascript RegExp Multiline</h1>
<h3>RJM Programming - February, 2019</h3>
<table><tr><th>Selection Toggle of <select onchange=tatodiv(this);><option value=''>above</option><option value='below'>above or below</option></select> ...</th><th><input type=button onclick="bold_all(this);" value="Bold"></input></th><th><input type=button onclick="bold_all(this);" value="StrikeThrough"></input></th><th><input type=button onclick="bold_all(this);" value="SubScript"></input></th><th><input type=button onclick="bold_all(this);" value="SuperScript"></input></th><th><input type=button onclick="bold_all(this);" title="olive" value="BackColor"></input></th><th><input type=button onclick="bold_all(this);" title="red" value="ForeColor"></input></th><th><input type=button onclick="bold_all(this);" value="InsertHorizontalRule"></input></th><th><input type=button onclick="bold_all(this);" title="🔤" value="InsertText"></input></th><th><input type=button onclick="bold_all(this);" title="32px" value="FontSize"></input></th><th><input type=button onclick="bold_all(this);" title="Verdana" value="FontName"></input></th><th><input type=button onclick="bold_all(this);" value="InsertParagraph"></input></th><th><input type=button onclick="bold_all(this);" value="InsertLineBreak"></input></th><th><input type=button onclick="bold_all(this);" title="http://www.rjmprogramming.com.au" value="CreateLink"></input></th></tr></table><br>
<table style="width:100%;" border=50>
<tr><th>Edit This (to var<font size=1>iable</font> x) ...</th><th>Effect of RegExp Multiline ...<br>x.replace(/^\s+|\s+$/gm,'')</th><th>Effect of RegExp no Multiline ...<br>x.replace(/^\s+|\s+$/g,'')</th></tr>
<tr id=trta><td><textarea style="height:400px;width:100%;background-color:yellow;" onblur=populate(this); id=basis>
The rain
In Spain
Falls mainly
On the plain </textarea><td><textarea style="height:400px;width:100%;" id=regexm></textarea></td><td><textarea style="height:400px;width:100%;" id=regexnonm></textarea></td>
</tr>
<tr id=trdiv style=display:none;><td><div contenteditable=true style="height:400px;width:100%;background-color:yellow;" onblur=dpopulate(this); id=dbasis>
The rain
In Spain
Falls mainly
On the plain </div><td><div style="height:400px;width:100%;" id=dregexm></div></td><td><div style="height:400px;width:100%;" id=dregexnonm></div></td>
</tr>
</table>
</body>
</html>