CODEWITHSUNDEEP
javascriptreactjs
Oystein
Oystein

Reputation: 1322

How to do a string replacement with formatting

In my React application, I'm using string.replace to replace parts of a string with variables, and I'm identifying the variables with %VARIABLE% syntax. And for plain text it works fine:

const text = 'This is %FIRST%, this is %SECOND%, and this is %THIRD%.'
  .replace(/%\w+%/g, ((variable) => ({
    '%THIRD%': 'a pear',
    '%FIRST%': 'an apple',
    '%SECOND%': 'a banana',
  }[variable] || variable)));
console.log(text)

But I'm trying to think of a way to format the variable text (e.g. bold formatting), so the text comes out like this:

This is an apple, this is a banana, and this is a pear.

How can I do this?

Upvotes: 1

Views: 1083

Answers (4)

Vinay Sharma
Vinay Sharma

Reputation: 3777

You can leverage React HTML Parser for this:

import React, { useMemo } from 'react';
import ReactHtmlParser from 'react-html-parser';

const Component = () => {
  const text = useMemo(
    () =>
      'This is %FIRST%, this is %SECOND%, and this is %THIRD%.'.replace(
        /%\w+%/g,
        variable => {
          const replacement =
            {
              '%THIRD%': 'a pear',
              '%FIRST%': 'an apple',
              '%SECOND%': 'a banana',
            }[variable] || variable;

          return `<b>${replacement}</b>`;
        },
      ),
    [],
  );

  return <div>{ReactHtmlParser(text)}</div>;
};

Upvotes: 1

Behemoth
Behemoth

Reputation: 9300

If you dont like dangerouslySetInnerHTML you can also use a package called html-react-parser. (I used the CDN version in the snippet below). Basically what it does is converting html code in string format to React elements.

The parser converts an HTML string to one or more React elements.

const App = () => {
  const text =
    "This is %FIRST%, this is %SECOND%, and this is %THIRD%.".replace(
      /%\w+%/g,
      (variable) =>
        ({
          "%THIRD%": "<b>a pear</b>",
          "%FIRST%": "<b>an apple</b>",
          "%SECOND%": "<b>a banana</b>",
        }[variable] || variable)
    );

  return <p> {window.HTMLReactParser(text)}</p>;
};

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js"></script>
<div id="root"></div>

Upvotes: 1

Drew Reese
Drew Reese

Reputation: 202618

You can wrap each replacement in a span and apply a specific CSS class and rules. Use dangerouslySetInnerHTML to render the html string into a div/element.

const text = 'This is %FIRST%, this is %SECOND%, and this is %THIRD%.'
  .replace(/%\w+%/g, ((variable) => {
    const value = {
      '%THIRD%': 'a pear',
      '%FIRST%': 'an apple',
      '%SECOND%': 'a banana',
    }[variable] || variable;
    
    return `<span class="bold">${value}</span>`;
  }));
  
console.log(text);

const rootElement = document.getElementById("root");
ReactDOM.render(
  <div dangerouslySetInnerHTML={{ __html: text }} />,
  rootElement
);
.bold {
  font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root" />

Upvotes: 1

user3927415
user3927415

Reputation: 435

you can do this with:

const var = "an apple"
const text = `This is ${var}`
console.log(text) // output: This is an apple

Upvotes: 0

Related Questions