JavaScript - Non-RegEx String Replace Function

This is a Non-RegEx String Replace Function!

All RegEx special characters from "Match" and "Replace" parameters are automatically escaped!

Some people alerted me that v1.0 is not compatible with Internet Explorer, so I decided to release v1.1!
(v1.0 is not compatible because Internet Explorer does not support functions default parameters values!)

v1.1 (Compatible with Internet Explorer)
<script> function StringReplace(String, Match, Replace, Options) { //__________________ StringReplace(Function) v1.1 ___________________ //arguments (parameters) work as local variables inside functions! //v1.1 is compatible with Internet Explorer (IE) //v1.0 is not compatible because IE does not support functions default parameters values //("" = Empty String) - (Alternative to default parameters values) if (String === undefined) {String = ""}; if (Match === undefined) {Match = ""}; if (Replace === undefined) {Replace = ""}; if (Options === undefined) {Options = ""}; //Escape RegEx "Match" variable special characters ($& means the whole matched string) //Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions Match = Match.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); //Escape RegEx "Replace" variable special character ($$ = literal $) //Necessary in order to avoid backreferences such as $1, $2, $&, etc Replace = Replace.replace(/\$/g, "$$$$") String = String.replace(RegExp(Match, Options), Replace); return String; }; //____________________________ Function Above / Examples Below ____________________________ UserString = "AAA-aaa_BBB-bbb_CCC-ccc_\\ \\\\ \\\\\\ / // /// _ . .. ... * ** ***"; UserString2 = "SpecialTest .*+?^${}()|[]\\ SpecialTest"; result = ""; result += StringReplace(UserString2, ".*+?^${}()|[]\\", "$& $$& $$$&", "gi") + "\n" ; result += StringReplace(UserString2, ".*+?^${}()|[]\\", "$1 $$2 $$$3", "gi") + "\n\n" ; result += StringReplace(UserString, "\\", "@", "gi") + "\n" ; result += StringReplace(UserString, "/", "@", "gi") + "\n" ; result += StringReplace(UserString, ".", "@", "gi") + "\n" ; result += StringReplace(UserString, "*", "@", "gi") + "\n" ; result += StringReplace(UserString, "A", "@", "gi") + "\n" ; result += StringReplace(UserString, "B", "@", "gi") + "\n" ; result += StringReplace(UserString, "C", "@", "gi") + "\n" ; alert(result); </script>

v1.0 (Not compatible with Internet Explorer)
<script> function StringReplace(String = "", Match = "", Replace = "", Options = "") { //__________________ StringReplace(Function) v1.0 ___________________ //arguments (parameters) work as local variables inside functions! //Escape RegEx "Match" variable special characters ($& means the whole matched string) //Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions Match = Match.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); //Escape RegEx "Replace" variable special character ($$ = literal $) //Necessary in order to avoid backreferences such as $1, $2, $&, etc Replace = Replace.replace(/\$/g, "$$$$") String = String.replace(RegExp(Match, Options), Replace); return String; }; //____________________________ Function Above / Examples Below ____________________________ UserString = "AAA-aaa_BBB-bbb_CCC-ccc_\\ \\\\ \\\\\\ / // /// _ . .. ... * ** ***"; UserString2 = "SpecialTest .*+?^${}()|[]\\ SpecialTest"; result = ""; result += StringReplace(UserString2, ".*+?^${}()|[]\\", "$& $$& $$$&", "gi") + "\n" ; result += StringReplace(UserString2, ".*+?^${}()|[]\\", "$1 $$2 $$$3", "gi") + "\n\n" ; result += StringReplace(UserString, "\\", "@", "gi") + "\n" ; result += StringReplace(UserString, "/", "@", "gi") + "\n" ; result += StringReplace(UserString, ".", "@", "gi") + "\n" ; result += StringReplace(UserString, "*", "@", "gi") + "\n" ; result += StringReplace(UserString, "A", "@", "gi") + "\n" ; result += StringReplace(UserString, "B", "@", "gi") + "\n" ; result += StringReplace(UserString, "C", "@", "gi") + "\n" ; alert(result); </script>


Keywords:
JavaScript - Non-RegEx String Replace Function
JavaScript - Non-RegEx StringReplace() Function
JavaScript - Non-RegEx StringReplace(Function)

PHP\JavaScript - 1 Layout for Several Pages (Basic)

"index.html" contains the layout! (Download All Files)

 - Url "Folder-Path/index.html" loads "Home.html"

 - Url "Folder-Path/index.html?Page=About.html" loads "About.html"

 - Url "Folder-Path/index.html?Page=Contact.html" loads "Contact.html"

 - Url "Folder-Path/index.html?Page=DontExist.html" returns "Page does not exist or could not be loaded!"

Everything works great, the only problem is that:

 - The website will depend on JavaScript (JavaScript must be enabled!)
 - If JavaScript is not enabled, the website warns user that JavaScript must be enabled!

 - Deprecated "Synchronous XMLHttpRequest" is in use (Script only continues after server response)

index.html = layout (JavaScript Ajax Get + Url parameters Values)
<!DOCTYPE html> <html> <head> <title>Layout</title> </head> <body> <script> //If JavaScript from the user Browser is disabled, "JavaScriptWarn" element will not be hidden! document.write("<style> #JavaScriptWarn {display: none;} </style>"); //Without "g" option, only the First occurrence and its subpatterns will be matched! //.*, means, find 0 or more characters - ?, means, until next & or end of line ($) is found! Page = document.URL.match(/\?Page=(.*?)(&|$)/i); if (Page === null) {Page = "Home.html"} else {Page = Page[1]}; //[1], returns first subpattern only var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {PageMainContent = this.responseText} else {PageMainContent = "<p>Page does not exist or could not be loaded!</p>"}}; xhttp.open("GET", Page, false); //false = halt code execution (wait for server response) xhttp.send(); </script> <h1>Testing 1 Layout for all Pages</h1> <a style=" margin-right: 30px;" href="index.html">Home</a> <a style=" margin-right: 30px;" href="index.html?Page=About.html">About</a> <a style=" margin-right: 30px;" href="index.html?Page=Contact.html">Contact</a> <a style=" margin-right: 30px;" href="index.html?Page=DontExist.html">Don't Exist Page</a> <a style=" margin-right: 30px;" href="index.html?Page=About.html&test=xxx&down=no">1</a> <a style=" margin-right: 30px;" href="index.html?test=xxx&Page=About.html&down=no">2</a> <script> document.write(PageMainContent); </script> <!-- The warning bellow only shows up if JavaScript from user Browser is disabled! --> <p id="JavaScriptWarn">This website requires JavaScript in your Browser to be enabled (Please, enable JavaScript!)!</p> <footer><strong>Copyright © blah blah blah blah</strong></footer> </body> </html>

Home.html
<h3> Home Page </h3> <pre> Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home Home </pre>

About.html
<script> document.title += " - About"; </script> <h3> About Page </h3> <pre> About About About About About About About About About About About About About About About About About About About About About </pre>

Contact.html
<script> document.title += " - Contact"; </script> <h3> Contact Page </h3> <pre> Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact </pre>



________________ Old approach below ________________




(PHP - Notes): Your server or web hosting provider must support PHP scripts in order to work!

layout.html
<!DOCTYPE html> <html> <head> <title>Windows Portable Apps</title> </head> <body> <h1>Start ...!</h1> <!-- @@@Content1@@@ --> <!-- @@@Content2@@@ --> <!-- @@@Content3@@@ --> <p>End ...!</p> <!-- @@@Content4@@@ --> </body> </html>

index.php (PHP + JavaScript)
<script> layout = `<?php echo file_get_contents("layout.html"); ?>`; layout = layout.replace("<title>Windows Portable Apps</title>", "<title>Home - PHP + Javascript</title>"); AddContent = ` <div>This is PHP + Javascript</div> <div>This is PHP + Javascript 2</div> <div>This is PHP + Javascript 3</div> `; layout = layout.replace("<!-- @@@Content1@@@ -->", AddContent); window.onload = function() { //window.onload forces this function to be called after page load (DOM) document.write(layout); //Since this line will be executed after page load (DOM), all the document will be re-written document.close(); //prevents infinite load time (see notes bellow) //Some browsers take a guess and seem to call document.close() at some later time (IE?) //others (Firefox, Safari) will keep the document open, which might cause some unusual behaviour. }; </script>

index.php (PHP only)
<?php $layout = file_get_contents("layout.html"); $layout = str_replace("<title>Windows Portable Apps</title>","<title>Home</title>",$layout); $content1 = ' <div>This is Home Page </div> <div> Home page Content </div> '; $layout = str_replace("<!-- @@@Content1@@@ -->",$content1,$layout); echo $layout; ?>

index.html (JavaScript only - Ajax Get)
<script> var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { layout = this.responseText; layout = layout.replace("<title>Windows Portable Apps</title>", "<title>Home - PHP + Javascript</title>"); AddContent = ` <div>This is PHP + Javascript</div> <div>This is PHP + Javascript 2</div> <div>This is PHP + Javascript 3</div> `; layout = layout.replace("<!-- @@@Content1@@@ -->", AddContent); document.write(layout); //Since this line will be executed after page load (DOM), all the document will be re-written document.close(); //prevents infinite load time (see notes bellow) //Some browsers take a guess and seem to call document.close() at some later time (IE?) //others (Firefox, Safari) will keep the document open, which might cause some unusual behaviour. }}; xhttp.open("GET", "layout.html", true); //true = keep code execution (don't wait for server response) xhttp.send(); </script>

index.html (JavaScript only - jQuery)
<!-- If you don't have jQuery on your website, load jQuery hosted by Google using the code below --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $.get( "layout.html", function( data ) { //jQuery library (Required) //Since this is a jQuery Shorthand Method, everything inside will be executed after page load (DOM) data = data.replace("<title>Windows Portable Apps</title>", "<title>Home - Javascript</title>"); AddContent = ` <div>This is javascript</div> <div>This is javascript 2</div> <div>This is javascript 3</div> `; data = data.replace("<!-- @@@Content1@@@ -->", AddContent); document.write(data); //Since this line will be executed after page load (DOM), all the document will be re-written document.close(); //prevents infinite load time (see notes bellow) //Some browsers take a guess and seem to call document.close() at some later time (IE?) //others (Firefox, Safari) will keep the document open, which might cause some unusual behaviour. }); </script>



Keywords:
PHP\JavaScript - 1 Layout for Several Pages (Basic)