Replace strings to tag in react

Question

I am trying to replace :: and ;; to

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

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](https://stackoverflow.com/questions/30474506/replace-part-of-string-with-tag-in-jsx) — Dmig, May 27 '22 at 18:02

Michael Horn · Accepted Answer · 2022-05-30T17:46:00.530

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 '22 at 17:46

answered May 27 '22 at 18:10

Michael Horn

3,819
9
22

1

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 May 28 '22 at 08:54
I have already updated answer please check once. – Dhaval Parmar May 28 '22 at 10:18
2

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. – Michael Horn May 30 '22 at 17:46
1

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 ? – Dhaval Parmar May 30 '22 at 17:52
2

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. – Michael Horn May 30 '22 at 17:55
Ok Thank you Michael Horn – Dhaval Parmar May 30 '22 at 17:57

score 0 · Answer 2 · answered May 27 '22 at 18:01

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  }} />
    );
  }

Replace strings to tag in react

2 Answers2