Javascript Multiline User Definable Replace RegExp Multiline Tutorial

Javascript Multiline User Definable Replace RegExp Multiline Tutorial

The user definable Javascript “replace” code textbox of yesterday’s Javascript User Definable Replace RegExp Multiline Tutorial was not user friendly for ideas beyond that “replace” clause, but we see that the user may be wanting to learn about Javascript as a whole, adding to that “replace” encouragement lead. So, today …

• we replace a textbox (ie. input type=text) with textarea rows=1 … and …
• we (continue on) making its border disappear, but add a title attribute so as to encourage those non-mobile users into discovery via the new …
  

  You can change me (and stuff after ; will be processed)

  … wording … and …

• vertically line up the “x” better via …
  
<span style="vertical-align:top;">x</span><textarea rows=1 onblur="populate(document.getElementById('basis'),this);" title="You can change me (and stuff after ; will be processed)" style="width:83%;border:0px solid white;" id=ione value=".replace(/^\s+|\s+$/gm,'')" placeholder=".replace(/^\s+|\s+$/gm,'')">.replace(/^\s+|\s+$/gm,'')</textarea>

  … and …
• encasing these textarea element objects (not value) into calls to …
  
var rest='';

function cthen() {
if (rest != '') {
eval('' + rest);
rest='';
}
}

function bthen(invlo) {
var invls=invlo.value.split(';');
if (eval('' + invls.length) > 1) {
rest=invlo.value.replace(invls[0] + ';', '');
if (rest.trim() == '') {
rest='';
} else {
rest=rest.replace(/this\./g, "document.getElementById('" + invlo.id + "').");
setTimeout(cthen, 200);
}
}
return invlo;
}

  … so as to time interventions (that perhaps involve the “x” variable) …
  
function myTrimNonMultiline(x) {
var xx="";
eval("xx=x" + bthen(document.getElementById('itwo')).value.split(';')[0]);
if (rest.replace(/\ /g,'').indexOf('x=') != -1) {
eval(rest.replace(/\ \=/g,'=').replace(/\=\ /g,'=').replace(/x\=/g,'xx=').replace(/\=x/g,'=xx'));
}
return xx; //x.replace(/^\s+|\s+$/g,'');
}


function myTrim(x) {
var xx="";
eval("xx=x" + bthen(document.getElementById('ione')).value.split(';')[0]);
if (rest.replace(/\ /g,'').indexOf('x=') != -1) {
eval(rest.replace(/\ \=/g,'=').replace(/\=\ /g,'=').replace(/x\=/g,'xx=').replace(/\=x/g,'=xx'));
}
return xx; //x.replace(/^\s+|\s+$/gm,'');
}

function myTrimNonMultilineDiv(x) {
var xx='';
eval("xx=x.replace(/\<br\>/gm,String.fromCharCode(10))" + bthen(document.getElementById('itwo')).value.split(';')[0] + ".replace(/\&nbsp\;/g,' ')" + bthen(document.getElementById('itwo')).value.split(';')[0] + ".replace(/\ /g,' ')");
if (rest.replace(/\ /g,'').indexOf('x=') != -1) {
eval(rest.replace(/\ \=/g,'=').replace(/\=\ /g,'=').replace(/x\=/g,'xx=').replace(/\=x/g,'=xx'));
}
while (xx.indexOf(String.fromCharCode(10)) != -1) {
xx=xx.replace(String.fromCharCode(10),'<br>');
}
return xx;
}

  … and replace “this” usage with “document.getElementById([textareaElementObject.id])” … and …
• use more title attributes around the webpage elements to help out further (encouraging some Javascript DOM practice) here … and …
• respond to aforesaid mentioned textarea onblur events resizing, as necessary, via …
  
function populate(tao, taotwo) {
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);
if (taotwo) {
if (taotwo.value.indexOf(String.fromCharCode(10)) != -1) {
taotwo.rows='' + eval('' + taotwo.value.split(String.fromCharCode(10)).length);
}
}
}


function dpopulate(tao, taotwo) {
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);
if (taotwo) {
if (taotwo.value.indexOf(String.fromCharCode(10)) != -1) {
taotwo.rows='' + eval('' + taotwo.value.split(String.fromCharCode(10)).length);
}
}
}


Again, feel free to get in your practice with the changed javascript_regex_multiline.htm live run link.

Previous relevant Javascript User Definable Replace RegExp Multiline Tutorial is shown below.

Javascript User Definable Replace RegExp Multiline Tutorial

Almost a year on, we revisit the Javascript Replace RegExp Multiline ExecCommand Tutorial, because, after all, if you are an interpretive substitutional kind of thinker you will know Javascript’s replace is the bee’s knees.

Yesterday’s ‎AppML Acronyms Hierarchy Tutorial‘s coding work reminded us about the many sides to (the oh so easily overlooked, because it is not new) replace …

• how ditching the RegExp ideas for the first argument, it only replaces once … a weakness you say?! … over the years now, we’d disagree … encase it in a while such as …
  
var x="The rain\nIn Spain\nFalls Mainly\nOn the plain.";
while (x.indexOf(String.fromCharCode(10)) != -1) {
x=x.replace(String.fromCharCode(10), ' ');
} // ... would result in x equals "The rain In Spain Falls Mainly On the plain."

  … if you want that “substitute all” effectiveness (with a non RegExp first argument) … but, as yesterday reminded us with the AppML “[object Object]” hardcoding we want to change, replace is great that a “replace command” for each “[object Object]” case can be tailored, in the proper order dynamically, in the Javascript code … and though we can’t remember precisely, we have leant on this quirk of replace many times in the past … whereas …
• how using RegExp ideas for the first argument can perform generic replaces (with “g” usage, rather than “s” (for single) usage) (even across line breaks (or not), as required, as today’s tutorial might be reminding you)

With this in mind, we’ve opened up the underlying web application here, to user entered or modified replace clauses (in two new textboxes) for the user to experiment all the more the wonders of this replace Javascript function brilliance.

Feel free to get in your practice with the changed javascript_regex_multiline.htm live run link.

Previous relevant Javascript Replace RegExp Multiline ExecCommand Tutorial is shown below.

Javascript Replace RegExp Multiline ExecCommand Tutorial

The star HTML element of the recent Javascript Replace RegExp Multiline Primer Tutorial was the …

• textarea … and a regular reader will know how we here like to associate textarea thinking with …
• div contenteditable=true

… thinking, representing alternative text editor tools, and in the latter case, quite a bit more. Read more regarding this with our HTML Textarea and Div Talents Primer Tutorial here. One of those “mores” is “cursor selection” possibilities, a whole field of Javascript functionality summarizable via …


document.designMode = "on";
document.execCommand(command, showUI, value);


In fact, though, a whole range of HTML elements other than textarea can respond to “a selection” and then an “execCommand command” be applied to change its look (simulating that “contenteditable=true” global attribute arrangement we favour mostly with HTML div elements), a functionality of some power and use and interest to programmers and web designers, we’re sure.

You might think we are shoving this functionality, a bit esoterically, into this changed javascript_regex_multiline.htm live run link, but we think one “proof of concept” can beget another “proof of concept” into the realms of user desirability for your more adventurous types willing to give ideas a go, on the way to “product development”. Today’s tutorial picture shows a few such “execCommand” changes in action.

Previous relevant Javascript Replace RegExp Multiline Primer Tutorial is shown below.

Javascript Replace RegExp Multiline Primer Tutorial

Lately we have had a couple of web application projects using HTML textarea elements extensively. When you involve this particular HTML element type ascii code 10 (line feed) comes into play, and we, as programmers, may need to contend with …


multiline data


… in this scenario. It’s easy enough to use Javascript replace function combined with regular expressions (RegExp) to simulate for a variable x what x.trim() does for a single line of string data (with no ascii code 10 nor 13), as per …


var outstr = x.replace(/^\s+|\s+$/g,'');


… but I’d never used, nor thought to use, the Javascript replace function combined with regular expressions to trim a whole paragraph of string data, as you might find resulting from the use of an HTML textarea element. We’d like to thank this great link, for the heads up, in this regard, used in this Javascript function (suitable for multiline string data) …


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


… used in today’s HTML and Javascript javascript_regex_multiline.html‘s proof of concept web application below can show you this in action …

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.