Navigate back to the homepage

how to replace string in react js?

Infinitbility
React
July 4th, 2022 · 1 min read
how to replace string in react js?

Hi Friends 👋,

Welcome To Infinitbility! ❤️

To replace string in react js, use the replace() or replaceAll() method.

  1. the replace() method replace your first occurrence ( match ) from your string
  2. the replaceAll() method will replace all occurrences from your string

Just you have to pass two parameters, in the first parameter you have to pass what you want to replace and in the second parameter you have to pass what you want to put in the place of replace string.

In the following example, we will take the samples string, and use both replace methods for replacing space with a hyphen ( - ).

1let str = "hi friends welcome to infinitbility".
2
3str.replace(" ", "-"); // "hi-friends welcome to infinitbility"
4
5str.replaceAll(" ", "-"); // "hi-friends-welcome-to-infinitbility"

Today, I’m going to show you How do i replace strings in react js, as mentioned above here, I’m going to use the replace() or replaceAll() method.

Let’s start today’s tutorial how do you replace strings in react js?

In this example, we will do

  1. take an example of a string state
  2. use the replace() or replaceAll() method
  3. example of replacing space with a hyphen
  4. example of replacing string with another string
  5. example of removing space from a string
  6. print the output of the string on the page screen
1import React, { useState, useEffect } from "react";
2export default function App() {
3 const [sampleString, setSampleString] = useState(
4 "hi boys hi girls welcome to infinitbility"
5 );
6
7 return (
8 <div className="App">
9 <h1>{`Example of replace space with hypen`}</h1>
10 <p>{sampleString.replace(" ", "-")}</p>
11 <p>{sampleString.replaceAll(" ", "-")}</p>
12
13 <h1>{`Example of replace string with another string`}</h1>
14 <p>{sampleString.replace("hi", "hello")}</p>
15 <p>{sampleString.replaceAll("hi", "hello")}</p>
16
17 <h1>{`Example of remove space from string`}</h1>
18 <p>{sampleString.replace(" ", "")}</p>
19 <p>{sampleString.replaceAll(" ", "")}</p>
20 </div>
21 );
22}

In the above react js example, we have taken the sample string state, and performed an example of replacing space with a hyphen, replacing string with another string, and removing space from a string.

I hope it helps you, All the best 👍.

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

how to concat string in react js?

how to concat string in react js?

An example of concat string in react js with a step-by-step example.

July 3rd, 2022 · 1 min read
react js convert string to number

react js convert string to number

An example of convert string to int in react js with a step-by-step example.

July 3rd, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]