Replace multiple strings within string with react jsx element

Question

I have a string called I want to order cheese chicken pizza..
I want to replace cheese with cheese and chicken with chicken.
So I expect a result like I want to order cheese chicken pizza.

In an array I have data like let arr = ['cheese', 'chicken']. I took the below approach:-

let text = "I want to order cheese chicken pizza."
arr.map(a=>{
  let findText = new RegExp(a, 'g');
  text = text.replace(findText, (match)=>(<span>{match}</span>))
});
return text;

I get the result I want to order [object object] [object object] pizza. I checked maximum solution is for replacing single same string. I want to achieve this because I will add eventListener to each span tag to get the details.

Can anyone help me out. Thnaks :)

codemonkey · Accepted Answer · 2021-02-06 19:38:12Z

2

The challenge, as outlined by Joans, is that you're trying to mix JSX and a string. There are, however, ways around it. The first thing you should do, is convert your array of strings to an object of elements. So this:

let arr = ['cheese', 'chicken']

Should be:

const Elems = {
  cheese: (
    <span
      style={{ color: "red", marginRight: "5px" }}
      onClick={() => alert("clicked cheese span")}
    >
      cheese
    </span>
  ),
  chicken: (
    <span
      style={{ color: "red", marginRight: "5px" }}
      onClick={() => alert("clicked chicken span")}
    >
      chicken
    </span>
  )
};

Notice how each span element has the onClick attached to them so you can catch the click event. You can add anything else you want.

Then, the idea is to break your text into an array such as:

["I", "want", "to", "order", "cheese", "chicken", "pizza."]

Replace those array elements (cheese and chicken) with the corresponding values inside your Elems object. And then render it. Easy! This function will do that for you:

const swapText = () => {
    const text_array = text.split(" ");
    const a = text_array.map((item) => {
      if (item in Elems) item = Elems[item];
      else item += " ";
      return item;
    });

    return a;
  };

Then just render it like so:

{swapText().map((item) => item)}

That's it. Here is a Sandbox for you: https://codesandbox.io/s/hardcore-lalande-vxwu6?file=/src/App.js

answered Feb 6, 2021 at 19:38

codemonkey

7,9655 gold badges28 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

abinas patra Over a year ago

Excellent, created another component for overall process. Just one doubt, splitting of string should not create any issues if the string is in html.

abinas patra Over a year ago

Can we do this in react-contenteditable . I mean I tried to this in your given sandbox. codesandbox.io/s/hungry-mendeleev-49rvv

codemonkey Over a year ago

@abinaspatra Great question. You absolutely can do it inside ContentEditable, BUT... the problem you're going to run into is handling the click event of the span, because ContentEditable is for, well, editing content inside it and any time you click on it, it overrides your click listener. Check out this link: codesandbox.io/s/busy-wood-kt6eq?file=/src/App.js

Jonas · Accepted Answer · 2021-02-06 18:12:09Z

1

The issue is that you're dealing with strings and can't insert a span into a string. You could either deal in only JSX or only strings - which is better depends in part on your situation (not sure exactly how you plan on adding the event listener's on the spans). Here is what only strings would look like:

let arr = ['cheese', 'chicken']
let text = "I want to order cheese chicken pizza."
arr.map(a=>{
  let findText = new RegExp(a, 'g');
  text = text.replace(findText, (match)=>(`<span>${match}</span>`))
});
return text;

answered Feb 6, 2021 at 18:12

Jonas

1,5932 gold badges15 silver badges30 bronze badges

1 Comment

abinas patra Over a year ago

Thank you so much for your answer, Yes the above I have achieved through which i can add style to those span tag, Is there any other way where I can add span tag and add listners to it. I mean can you suggest how my should look like, so that it would be easier to achieve.

Collectives™ on Stack Overflow

Replace multiple strings within string with react jsx element

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related