{"id":48198,"date":"2020-03-06T03:01:49","date_gmt":"2020-03-05T17:01:49","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=48198"},"modified":"2021-02-12T11:23:47","modified_gmt":"2021-02-12T01:23:47","slug":"javascript-replace-regexp-multiline-execcommand-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-replace-regexp-multiline-execcommand-tutorial\/","title":{"rendered":"Javascript Replace RegExp Multiline ExecCommand 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 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","protected":false},"excerpt":{"rendered":"<p>The star HTML element of the recent Javascript Replace RegExp Multiline Primer Tutorial was the &#8230; textarea &#8230; and a regular reader will know how we here like to associate textarea thinking with &#8230; div contenteditable=true &#8230; thinking, representing alternative &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-replace-regexp-multiline-execcommand-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,14,37],"tags":[2442,3247,342,3246,576,652,2533,3241,1825,997,1986,1040,2226,1043,1053,1116,1626,1262,3242,1319,1721],"class_list":["post-48198","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-contenteditable","tag-designmode","tag-div","tag-execcommand","tag-html","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-trim","tag-tutorial","tag-variable"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48198"}],"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=48198"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48198\/revisions"}],"predecessor-version":[{"id":51667,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48198\/revisions\/51667"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=48198"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=48198"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=48198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}