javascript Replace

The Javascript replace function will search for the value already existing through the Attribute (ID) of a tag, and replace it with a new value or string.

Whether you want to replace a string or a URL, for that you have to use the Javascript replace function. Let’s know how Javascript replace function works.

String Javascript Replace Method

function myreplacefunction() {
	var getstr = document.getElementById(“ABC”).innerHTML;
	var getres = getstr.replace(“Replace Me”, “I Replaced Now”);
	document.getElementById(“ABC”).innerHTML = getres;
}

<p id=”ABC”>Replace Me</p>

<button onclick=”myreplacefunction()”>Replace it</button>

Output:- I Replaced Now
  • We have a paragraph tag of HTML in which we have given id as “ABC”.
  • With this, we have a button, on which our myreplacefunction () is running above the onclick.
  • The getElementById functiona will copy the innerHTML (string) of ” ABC ” id into the getstr variable.
  • After this, the replace function will replace the existing string with a new string and put that value in the getres variable.
  • Finally the document.getElementById function will return a new string to id ” ABC “.

Current Url Javascript Replace Method

If you want to replicate the URL at the click of a button, then you have to use this method for that.

function replacemyurl() {
	location.replace(” http://htmlunderline.com“)
}

<button onclick=”replaceurl()”>Replace Current URL With Htmlunderline.com</button>

Output:- You will redirect to Htmlunderline.com

Related: Basic 8 Syntax Of CSS Hover Effect You Must Know!

We have a button on which the replacemyurl () function will run on onclick and replaces the current URL with the given new URL.

String Javascript Replace Window onload

If you want to change a string without clicking any button, for that you will have to use window.onload.

For example, we have some text inside the paragraph tag and we want to replace that text without clicking any button. So for that, you have to write this syntax.

window.onload = function() {
	document.getElementById(“strrep”).innerHTML = “sainblogs.com” ;
}

<p id=”strrep”>Replace Me To New String</p>

Output:- sainblogs.com

URL Javascript Replace Window Onload

If you want to change your current URL without clicking any button, then for that you have to use the example given below.

window.onload = function() {
	location.replace(“https://sainiblogs.com/”)
}

Replace Single Word Inside Text

If you have a paragraph or a heading, and you want to replace a word between it. So for that, you have to see the example given below.

function changetext() {
	var getstr = document.getElementById(“abcd”).innerHTML;
	var getres = getstr.replace(‘$100k’, “$200k”);
	document.getElementById(“abcd”).innerHTML = getres;
}

<p id=”abcd”>Lets replace $100k with $200k</p>

<button onclick=”changetext()”>Try it</button>

Output:- $200k

The function will first find the value ($100k), if the function finds this value then it will replace this value with $ 200k.

Multi-String Javascript Replace

If you want to replace more than one string in your paragraph with a new string, then for that you have to see the below example.

function multireplace() {
	var mltstr = document.getElementById(“multi”).innerHTML;
	var mltres = mltstr.replace(/sad/g, “happy”);
	document.getElementById(“multi”).innerHTML = mltres;
}

<p id=”multi”>I am sad, You are sad, They are sad</p>

<button onclick=”multireplace()”>Click me</button>

The function will search for all the sad words inside your paragraph and replace it with a new string (happy).

Related: 5 Easiest Ways To Apply Padding CSS