Replace part of string with tag in JSX

ReactjsReact Jsx

Reactjs Problem Overview

I'm trying to replace parts of a string with JSX tags, like so:

render: function() {
    result = this.props.text.replace(":",<div className="spacer"></div>);
    return (
         <div>        
             {result}
         <div>        
    );
}

But given that this.props.text is Lorem : ipsum, it results in

<div>
    Lorem [object Object] ipsum.
</div>

Is there a way to solve this or another way to replace parts of a string with JSX tags?

Reactjs Solutions

Solution 1 - Reactjs

The accepted answer is 5 years old. For this problem issue #3368 was created and based on the solution provided by a Facebook employee working on React, react-string-replace was created.

Using react-string-replace, here is how you can solve your problem

const reactStringReplace = require('react-string-replace');

const HighlightNumbers = React.createClass({
  render() {
    const content = 'Hey my number is 555:555:5555.';
    return (
      <span>
        {reactStringReplace(content, ':', (match, i) => (
          <div className="spacer"></div>
        ))}
      </span>
    );
  },
});

Solution 2 - Reactjs

When you pass a JSX element to replace() as the second argument, that element is converted to a string because replace() expects a string as a second argument. What you need to do is convert your string to an array of strings and JSX elements. So your result variable should contain something like ['Lorem ', <div className="spacer"></div>, ' ipsum'].

Something like this:

function flatMap(array, fn) {
  var result = [];
  for (var i = 0; i < array.length; i++) {
    var mapping = fn(array[i]);
    result = result.concat(mapping);
  }
  return result;
}

var Comp = React.createClass({
  render: function () {
    var result = 'Lorem : ipsum';
    result = flatMap(result.split(':'), function (part) {
      return [part, <div>spacer</div>];
    });
    // Remove the last spacer
    result.pop();
    return (
      <div>        
        {result}
      </div>
    );
  }
});

Solution 3 - Reactjs

The following should also work (assumes ES6), The only nuance is that the text is actually wrapped inside a DIV element and not preceded by it, assuming you are going to use CSS for the actual spacing this shouldn't be a problem.

const result = this.props.text.split(':').map(t => {
  return <div className='textItem'>{t}</div>;
});

Solution 4 - Reactjs

Wrote a utility function for jsx.

const wrapTags = (text: string, regex: RegExp, className?: string) => {
  const textArray = text.split(regex);
  return textArray.map(str => {
    if (regex.test(str)) {
      return <span className={className}>{str}</span>;
    }
    return str;
  });
};

Solution 5 - Reactjs

You guys are using complicated approaches, Just keep it simple:

function replaceJSX(str, find, replace) {
    let parts = str.split(find);
    for(let i = 0, result = []; i < parts.length; i++) {
        result.push(parts[i]);
        result.push(replace);
    }
    return result;
}

Usage

replaceJSX(variable, ":", <br />);

Solution 6 - Reactjs

I have come to following simple solution that does not include third party library or regex, maybe it can still help someone.

Mainly just use .replace() to replace string with regular html written as string, like:

text.replace('string-to-replace', '<span class="something"></span>')

And then render it using dangerouslySetInnerHTML inside an element.

Full example:

const textToRepace = 'Insert :' // we will replace : with div spacer
const content = textToRepace.replace(':', '<div class="spacer"></div>') : ''

// then in rendering just use dangerouslySetInnerHTML
render() {
    return(
        <div dangerouslySetInnerHTML={{
            __html: content
        }} />
    )
}

Solution 7 - Reactjs

After some research I found that existing libraries doesn't fit my requirements. So, of course, I have written my own:

https://github.com/EfogDev/react-process-string

It is very easy to use. Your case example:

let result = processString({
    regex: /:/gim,
    fn: () => <div className="spacer"></div>
})(this.props.test);

Solution 8 - Reactjs

I had the more common task - wrap all (English) words by custom tag. My solution:

class WrapWords extends React.Component {
  render() {
    const text = this.props.text;
    const isEnglishWord = /\b([-'a-z]+)\b/ig;
    const CustomWordTag = 'word';

    const byWords = text.split(isEnglishWord);

    return (
    <div>
      {
        byWords.map(word => {
          if (word.match(isEnglishWord)) {
            return <CustomWordTag>{word}</CustomWordTag>;
          }
          return word;
        })
      }
    </div>
    );
    
  }
}

// Render it
ReactDOM.render(
  <WrapWords text="Argentina, were playing: England in the quarter-finals (the 1986 World Cup in Mexico). In the 52nd minute the Argentinian captain, Diego Maradona, scored a goal." />,
  document.getElementById("react")
);


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="react"></div>

Solution 9 - Reactjs

Nothing around WEB globe worked for me exept this solution - https://www.npmjs.com/package/regexify-string

Working with React, strings and doesn't have any additional dependecies

regexifyString({
    pattern: /\[.*?\]/gim,
    decorator: (match, index) => {
        return (
            <Link
                to={SOME_ROUTE}
                onClick={onClick}
            >
                {match}
            </Link>
        );
    },
    input: 'Some text with [link]',
});

Solution 10 - Reactjs

Something like this:

function replaceByComponent(string, component) {
  const variable = string.substring(
    string.lastIndexOf("{{") + 2, 
    string.lastIndexOf("}}")
  );
  const strParts = string.split(`{{${variable}}}`);
  const strComponent = strParts.map((strPart, index) => {
    if(index === strParts.length - 1) {
      return strPart
    }
    return (   
      <>
        {strPart}
        <span>
          {component}
        </span>
      </>
    )
  })
  return strComponent
}

Solution 11 - Reactjs

In my case, I use React and I wanted to replace url in text with anchor tag.

In my solution, I used two library.

and wrote this code.

/* eslint-disable react/no-danger */
import React from 'react';
import { Parser } from 'simple-text-parser';
import urlRegex from 'url-regex';

type TextRendererProps = { text: string };

const parser = new Parser();
const re = urlRegex();

parser.addRule(re, (url) => {
  return `<a src="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`;
});

export const TextRenderer: React.FC<TextRendererProps> = ({ text }) => {
  return (
    <span
      dangerouslySetInnerHTML={{
        __html: parser.render(text),
      }}
    />
  );
};

You can easily add replacing rule by just writing parser.addRule().

Solution 12 - Reactjs

If you'd also like to be able to make replacements within replacements (for example, to highlight search terms within urls), check out this node module I created - https://github.com/marcellosachs/react-string-replace-recursively

Solution 13 - Reactjs

Example with hooks:

import React, { useEffect, useState, useRef } from 'react'

export function Highlight({ value, highlightText }) {
  const [result, resultSet] = useState(wrap())

  const isFirstRun = useRef(true) 

  function wrap() {
    let reg = new RegExp('(' + highlightText + ')', 'gi')
    let parts = value.split(reg)

    for (let i = 1; i < parts.length; i += 2) {
      parts[i] = (
        <span className='highlight' key={i}>
          {parts[i]}
        </span>
      )
    }
    return <div>{parts}</div>
  }

  useEffect(() => {
    //skip first run
    if (isFirstRun.current) {
      isFirstRun.current = false
      return
    }
    resultSet(wrap())
  }, [value, highlightText])

  return result
}

Solution 14 - Reactjs

i think this is the most light perfect solution:

render() {
    const searchValue = "an";
    const searchWordRegex = new RegExp(searchValue, "gi");
    const text =
      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text";
    return (
      <div>
        {text.split(searchWordRegex).length > 1
          ? text.split(searchWordRegex).map((chunk, index) => {
              if (chunk !== "") {
                return index === 0 &&
                  ! new RegExp("^" + searchValue, "gi").test(text) ? (
                  chunk
                ) : (
                  <span key={index}>
                    <span
                      className="highlight"
                      style={{
                        fontWeight: "bold"
                      }}
                    >
                      {searchValue.charAt(0).toUpperCase() +
                        searchValue.slice(1)}
                    </span>
                    {chunk}
                  </span>
                );
              } else {
                return null;
              }
            })
          : text}
      </div>
    );
  }

> and here is a working example

Solution 15 - Reactjs

I just a wrote function helper to replace some Texts, Components, and even HTMLs to a template string for my project. It turned out so nice and smooth.

const replaceJSX = (str, replacement) => {
	const result = [];
	const keys = Object.keys(replacement);
	const getRegExp = () => {
		const regexp = [];
		keys.forEach((key) => regexp.push(`{${key}}`));
		return new RegExp(regexp.join('|'));
	};
	str.split(getRegExp()).forEach((item, i) => {
		result.push(item, replacement[keys[i]]);
	});
	return result;
};

Usage:

const User = ({ href, name }) => {
	return (
		<a href={href} title={name}>
			{name}
		</a>
	);
};

const string = 'Hello {component}, {html}, {string}';

return (
	<div>
		{replaceJSX(string, {
			component: (
				<User
					href='https://stackoverflow.com/users/64730/magnus-engdal'
					name='Magnus Engdal'
				/>
			),
			html: (
				<span style={{ fontWeight: 'bold' }}>
					This would be your solution
				</span>
			),
			string: 'Enjoy!',
		})}
	</div>
)

And you'll get something like this:

<div>Hello <a href="https://stackoverflow.com/users/64730/magnus-engdal" title="Magnus Engdal">Magnus Engdal</a>, <span style="font-weight: bold;">This would be your solution.</span>, Enjoy!.</div>
Categories
Recommended Reactjs Solutions
Recommended React Jsx Solutions

Previous Solution:

Artisan, creating tables in database

PhpLaravelLaravel 5Laravel ArtisanLaravel Migrations

Next Solution:

Finding count of distinct elements in DataFrame in each column

PythonNumpyPandas

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMagnus EngdalView Question on Stackoverflow
Solution 1 - ReactjsMatthew BarbaraView Answer on Stackoverflow
Solution 2 - ReactjsAnders EkdahlView Answer on Stackoverflow
Solution 3 - ReactjsAndy PolhillView Answer on Stackoverflow
Solution 4 - ReactjsTushar TilwaniView Answer on Stackoverflow
Solution 5 - ReactjsAmir FoView Answer on Stackoverflow
Solution 6 - ReactjsAleksejView Answer on Stackoverflow
Solution 7 - ReactjsEfogView Answer on Stackoverflow
Solution 8 - ReactjsLonderenView Answer on Stackoverflow
Solution 9 - ReactjsKas ElvirovView Answer on Stackoverflow
Solution 10 - ReactjsarnaudjnnView Answer on Stackoverflow
Solution 11 - ReactjsmozuView Answer on Stackoverflow
Solution 12 - Reactjsuser1050268View Answer on Stackoverflow
Solution 13 - ReactjsZiiMakcView Answer on Stackoverflow
Solution 14 - ReactjsBiskrem MuhammadView Answer on Stackoverflow
Solution 15 - ReactjsSpleenView Answer on Stackoverflow