Replace strings to tag in react

Question

I am trying to replace :: and ;; to

const text = 'Welcome :: my ;;'.replace('::', to).replace(';;', world);

I am getting this Welcome [object Object] my [object Object].

Expected response Welcome **to** my **world**.

Can anyone please help me on that.

Updated question

There will be random text like this:

Welcome :: my ;;
Welcome ;; my ::
Hello ::

And replace :: with dynamic value suppose to only and ;; with dynamic value world only.

Does this answer your question? Replace part of string with tag in JSX — Dmig
– Dmig, Commented May 27, 2022 at 18:02

Michael Horn · Accepted Answer · 2022-05-30 17:46:00Z

2

JSX elements are syntax sugar for React DOM elements, which are objects. A string on it's own won't carry information about things such as font size or weight, so it may be best to represent the whole thing by JSX. I think something along these lines would do it:

const text = 'Welcome :: my ;;';
const myWorld = (
  <span>
    {text.split(' ').map((word, index) => {
      const space = index == 0 ? '' : ' ';
      if (word == '::') {
        return (<strong key={index}>{space + "to"}</strong>);
      } else if (word == ';;') {
        return (<strong key={index}>{space + "world"}</strong>);
      }

      return (<span key={index}>{space + word}</span>);
    }}
  </span>
);

If you need the replacements to be dynamic, you can create a function for this:

// Example `replacements` object:
// { 
//   '::': 'to',
//   ';;': 'world',
// }

function replaceWithEmphasis(text, replacements) {
  const words = text.split(' ');
  
  return (
    <span> 
      {
        words.map((word, index) => {
          const replaced = replacements[word];

          // Preserve spaces between words
          const space = index == 0 ? '' : ' ';

          if (replaced != null) {
            return <strong key={index}>{space + replaced}</strong>;
          } else {
            return <span key={index}>{space + word}</span>;
          }
        })
      }
    </span>
  );
}

edited May 30, 2022 at 17:46

answered May 27, 2022 at 18:10

Michael Horn

4,14913 silver badges24 bronze badges

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

6 Comments

Dhaval Parmar Over a year ago

Thanks @Michael Horn Do you have any idea that if we need to replace dynamic value like instead of to or world to dynamic value will be replaced and its order is not fixed some time first word will come sometime first to and also number of pattern also not fixed like currently there are two patterns but sometime one pattern (::, ;;) ?

Dhaval Parmar Over a year ago

I have already updated answer please check once.

Michael Horn Over a year ago

Sorry for the delay, but I edited my answer - Hope that answers your question! Also the previous answer didn't preserve spacing between words, so I've added that as well.

Dhaval Parmar Over a year ago

last question suppose if I want to pass className then it would work ? For example: replaceWithEmphasis(text, replacement, props) and while return if I use then should css and other props will work ?

Michael Horn Over a year ago

Sure - You can just pass a className argument to the function, and then use it in the case where you return the strong element: {replaced}; - Or something along those lines, depending on exactly what you want to do.

|

Lahcen · Accepted Answer · 2022-05-27 18:01:29Z

0

You can do it like this

const text = 'Welcome :: my ;;'.replace('::', '<strong>to</strong>').replace(';;', '<strong>world</strong>')

and then display it using dangerouslySetInnerHTML

render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: text  }} />
    );
  }

answered May 27, 2022 at 18:01

Lahcen

1,45312 silver badges15 bronze badges

Collectives™ on Stack Overflow

Replace strings to tag in react

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related