{"id":51668,"date":"2021-02-14T03:01:32","date_gmt":"2021-02-13T17:01:32","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=51668"},"modified":"2021-02-13T12:03:23","modified_gmt":"2021-02-13T02:03:23","slug":"javascript-user-definable-replace-regexp-multiline-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-user-definable-replace-regexp-multiline-tutorial\/","title":{"rendered":"Javascript User Definable Replace RegExp Multiline Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/javascript_regex_multiline.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript User Definable Replace RegExp Multiline Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/replace_regexp_more.jpg\" title=\"Javascript User Definable Replace RegExp Multiline Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript User Definable Replace RegExp Multiline Tutorial<\/p><\/div>\n<p>Almost a year on, we revisit the <a title='Javascript Replace RegExp Multiline ExecCommand Tutorial' href='#jrremect'>Javascript Replace RegExp Multiline ExecCommand Tutorial<\/a>, because, after all, if you are an <i>interpretive <a style=\"cursor:pointer;text-decoration:underline;\" onclick=\"document.getElementById('whos').style.display='block';\">substitutional<\/a><\/i> kind of thinker you will know Javascript&#8217;s <a target=_blank title='Javascript string replace function information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_replace.asp'>replace<\/a> is the bee&#8217;s knees.<\/p>\n<p><iframe loading=\"lazy\" id=whos style=\"display:none;\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/37qk8Q7xNHI\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>Yesterday&#8217;s <a target=_blank href='\/\/www.rjmprogramming.com.au\/ITblog\/appml-acronyms_hierarchy-tutorial\/' title='AppML Acronyms Hierarchy Tutorial'>\u200eAppML Acronyms Hierarchy Tutorial<\/a>&#8216;s coding work reminded us about the many sides to <font size=1>(the oh so easily overlooked, because it is not new)<\/font> <a target=_blank title='Javascript string replace function information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_replace.asp'>replace<\/a> &#8230;<\/p>\n<ul>\n<li>how ditching the RegExp ideas for the first argument, it only replaces once &#8230; a weakness you say?! &#8230; over the years now, we&#8217;d disagree &#8230; encase it in a while such as &#8230;<br \/>\n<code><br \/>\n var x=\"The rain\\nIn Spain\\nFalls Mainly\\nOn the plain.\";<br \/>\n while (x.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n   x=x.replace(String.fromCharCode(10), ' ');<br \/>\n }   \/\/ ... would result in x equals \"The rain In Spain Falls Mainly On the plain.\"<br \/>\n<\/code><br \/>\n &#8230; if you want that &#8220;substitute all&#8221; effectiveness (with a non RegExp first argument) &#8230; but, as yesterday reminded us with the AppML &#8220;[object Object]&#8221; hardcoding we want to change, <a target=_blank title='Javascript string replace function information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_replace.asp'>replace<\/a> is great that a &#8220;replace command&#8221; for each &#8220;[object Object]&#8221; case can be tailored, in the proper order dynamically, in the Javascript code &#8230; and though we can&#8217;t remember precisely, we have leant on this quirk of <a target=_blank title='Javascript string replace function information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_replace.asp'>replace<\/a> many times in the past &#8230; whereas &#8230;<\/li>\n<li>how using RegExp ideas for the first argument can perform generic replaces (with &#8220;g&#8221; usage, rather than &#8220;s&#8221; (for single) usage) (even across line breaks (or not), as required, as today&#8217;s tutorial might be reminding you)<\/li>\n<\/ul>\n<p>With this in mind, we&#8217;ve opened up the underlying web application here, to user entered or modified <a target=_blank title='Javascript string replace function information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_replace.asp'>replace<\/a> clauses (in two new textboxes) for the user to experiment all the more the wonders of this <a target=_blank title='Javascript string replace function information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_replace.asp'>replace<\/a> Javascript function brilliance.<\/p>\n<p>Feel free to get in your practice with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/javascript_regex_multiline.html--GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/javascript_regex_multiline.html--GETME\" title=\"javascript_regex_multiline.htm\">javascript_regex_multiline.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/javascript_regex_multiline.htm\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-user-definable-replace-regexp-multiline-execcommand-tutorial\/'>Javascript User Definable Replace RegExp Multiline Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jrremect'>Previous relevant <a target=_blank title='Javascript Replace RegExp Multiline ExecCommand Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-replace-regexp-multiline-execcommand-tutorial\/'>Javascript Replace RegExp Multiline ExecCommand Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/javascript_regex_multiline.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Replace RegExp Multiline ExecCommand Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/selection_toggleof.jpg\" title=\"Javascript Replace RegExp Multiline ExecCommand Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Replace RegExp Multiline ExecCommand Tutorial<\/p><\/div>\n<p>The star HTML element of the recent <a title='Javascript Replace RegExp Multiline Primer Tutorial' href='#jrrempt'>Javascript Replace RegExp Multiline Primer Tutorial<\/a> was the &#8230;<\/p>\n<ul>\n<li>textarea &#8230; and a regular reader will know how we here like to associate textarea thinking with &#8230;<\/li>\n<li>div contenteditable=true<\/li>\n<\/ul>\n<p> &#8230; thinking, representing alternative text editor tools, and in the latter case, quite a bit more.  Read more regarding this with our <a target=_blank title='HTML Textarea and Div Talents Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-textarea-and-div-talents-primer-tutorial\/'>HTML Textarea and Div Talents Primer Tutorial<\/a> here.  One of those &#8220;mores&#8221; is &#8220;cursor selection&#8221; possibilities, a whole field of Javascript functionality summarizable via &#8230;<\/li>\n<p><code><br \/>\ndocument.designMode = \"on\";<br \/>\n<a target=_blank title='HTML DOM execCommand() Method information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_execcommand.asp'>document.execCommand<\/a>(command, showUI, value);<br \/>\n<\/code><\/p>\n<p>In fact, though, a whole range of HTML elements other than <i>textarea<\/i> can respond to &#8220;a selection&#8221; and then an &#8220;execCommand command&#8221; be applied to change its look (simulating that &#8220;contenteditable=true&#8221; 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&#8217;re sure.<\/p>\n<p>You might think we are <i>shoving<\/i> this functionality, a bit esoterically, into <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/javascript_regex_multiline.html-GETME\">this changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/javascript_regex_multiline.html-GETME\" title=\"javascript_regex_multiline.htm\">javascript_regex_multiline.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/javascript_regex_multiline.htm\" title=\"Click picture\">live run<\/a> link, but we think one &#8220;proof of concept&#8221; can beget another &#8220;proof of concept&#8221; into the realms of <a target=_blank title='User desirability' href='https:\/\/www.entrepreneur.com\/article\/307454'>user desirability<\/a> for your more adventurous types willing to give ideas a go, on the way to &#8220;product development&#8221;.  Today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/selection_toggleof.jpg\">tutorial picture<\/a> shows a few such &#8220;execCommand&#8221; changes in action.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-replace-regexp-multiline-execcommand-tutorial\/'>Javascript Replace RegExp Multiline ExecCommand Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jrrempt'>Previous relevant <a target=_blank title='Javascript Replace RegExp Multiline Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-replace-regexp-multiline-primer-tutorial\/'>Javascript Replace RegExp Multiline Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/javascript_regex_multiline.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Replace RegExp Multiline Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/javascript_regex_multiline.jpg\" title=\"Javascript Replace RegExp Multiline Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Replace RegExp Multiline Primer Tutorial<\/p><\/div>\n<p>Lately we have had a couple of web application projects using HTML <a target=_blank title='HTML textarea information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_textarea.asp'>textarea<\/a> 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 &#8230;<\/p>\n<p><code><br \/>\nmultiline data<br \/>\n<\/code><\/p>\n<p> &#8230; in this scenario.  It&#8217;s easy enough to use Javascript <a target=_blank title='Javascript string replace function information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_replace.asp'>replace<\/a> function combined with <a target=_blank title='Javascript RegExp information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/jsref_obj_regexp.asp'>regular expressions<\/a> (RegExp) to simulate for a var<font size=1>iable<\/font> x what x.<a target=_blank title='String trim function information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/jsref_trim_string.asp'>trim<\/a>() does for a single line of string data (with no ascii code 10 nor 13), as per &#8230;<\/p>\n<p><code><br \/>\nvar outstr = x.replace(\/^\\s+|\\s+$\/g,'');<br \/>\n<\/code><\/p>\n<p> &#8230; but I&#8217;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&#8217;d like to thank <a target=_blank href='https:\/\/stackoverflow.com\/questions\/49209362\/what-is-the-meaning-of-s-s-gm-in-javascript' title='Useful link, thanks'>this great link<\/a>, for the heads up, in this regard, used in this Javascript function <font color=blue>(suitable for multiline string data)<\/font>  &#8230;<\/p>\n<p><code><br \/>\n function myTrim(x) {<br \/>\n  return x.replace(\/^\\s+|\\s+$\/g<font color=blue>m<\/font>,'');<br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; used in today&#8217;s HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/javascript_regex_multiline.html_GETME\" title=\"javascript_regex_multiline.html\">javascript_regex_multiline.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/javascript_regex_multiline.html\" title=\"Click picture\">proof of concept web application<\/a> below can show you this in action &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/javascript_regex_multiline.html\" style=\"width:100%;height:720px;\"><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d48151' onclick='var dv=document.getElementById(\"d48151\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/replace\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48151' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d48198' onclick='var dv=document.getElementById(\"d48198\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/contenteditable\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48198' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d51668' onclick='var dv=document.getElementById(\"d51668\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/regexp\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51668' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;s replace is the bee&#8217;s knees. Yesterday&#8217;s \u200eAppML Acronyms Hierarchy Tutorial&#8216;s coding &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-user-definable-replace-regexp-multiline-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[2442,3247,342,3246,576,3163,652,2533,3241,1825,997,1986,1040,2226,1043,1053,1116,1626,1262,1675,3242,1319,1891,3214,1721],"class_list":["post-51668","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-contenteditable","tag-designmode","tag-div","tag-execcommand","tag-html","tag-interaction","tag-javascript","tag-line-feed","tag-multiline","tag-paragraph","tag-programming","tag-proof-of-concept","tag-regex","tag-regexp","tag-regular-expression","tag-replace","tag-selection","tag-string","tag-textarea","tag-textbox","tag-trim","tag-tutorial","tag-user","tag-user-interaction","tag-variable"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51668"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=51668"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51668\/revisions"}],"predecessor-version":[{"id":51685,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51668\/revisions\/51685"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=51668"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=51668"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=51668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}