How to replace parts of a string with a component?

[binarykitchen]

I have this code which is obviously not working:

    _.each(matches, (match) ->
      string = string.replace(match, ->
        <span className="match" key={i++}>{match}</span>
      )
    )

Because that would result into a string mixed with objects. Bad I know. But how can I add React components inside a string? All I want is to highlight parts of a string with a react component. A tough case to crack I guess.

[bloodyowl]

something like this should work :

const escapeRE = new RegExp(/([.*+?^=!:$(){}|[\]\/\\])/g)
const safeRE = (string) => {
  return string.replace(escapeRE, "\\$1")
}

class Hightlight extends Component {
  static propTypes = {
    match : PropTypes.string,
    string : PropTypes.string,
  }

  render() {
    return (
      <span
        dangerouslySetInnerHTML={{
          __html : string.replace(safeRE(this.props.match), "<strong className\"match\">$1</strong>")
        }} />
    )
  }
}

[binarykitchen]

Yes, I've been thinking of abusing dangerouslySetInnerHTML but I do not like this idea. This method labelled as dangerously for good reasons.

Is there no way to teach React to parse jsx within a string? Have React parse i.E.

var example = "this one word <span className="match" key={i++}>hello</span> is highlighted"

and return this in a render method?

[syranide]

@binarykitchen You can construct React elements dynamically and that's what you need to do here, you just can't do it with only string replacement.

[binarykitchen]

@syranide Yes, I already know that. My point is: wouldn't this be a nice JSX/React feature? Parse a string and turn any tags inside into child React components.

[sophiebits]

You can use the split function with a regex and then replace the captured parts, like so:

var parts = "I am a cow; cows say moo. MOOOOO.".split(/(\bmoo+\b)/gi);
for (var i = 1; i < parts.length; i += 2) {
  parts[i] = <span className="match" key={i}>{parts[i]}</span>;
}
return <div>{parts}</div>;

Let me know if that's unclear.

[sophiebits]

Parsing JSX at runtime is error-prone and slow, and can easily have security implications – it wouldn't inherently be any safer than dangerouslySetInnerHTML is.

[bloodyowl]

that can be a bit of an issue with type case

— mlb

On 12 mars 2015, at 21:37, Ben Alpert notifications@github.com wrote:

You can use the split function with a regex and then replace the captured parts, like so:

var parts = "I am a cow; cows say moo. MOOOOO.".split(/(\bmoo+\b)/gi);
for (var i = 1; i < parts.length; i += 2) {
parts[i] = {parts[i]};
}
return

{parts}

;
Let me know if that's unclear.

—
Reply to this email directly or view it on GitHub.

[iansinnott]

I ran into this issue as well when trying to highlight parts of a string programatically (i.e. replace with <span> tags). I ended up creating a module based on @spicyj's solution above. For anyone interested: iansinnott/react-string-replace

[oztune]

@iansinnott Thanks for sharing that. I started using it then realized I'm going to need the full String.prototype.replace API (needed access to the individual matching groups for a regexp within the replace function). I realized the change will be more than a simple patch (and require an API change) so I created a new repo: https://github.com/oztune/string-replace-to-array

[efogdev]

If react-string-replace doesn't fit your requirements:

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

[richardwestenra]

The following worked for me as way to highlight keyword(s) within a string of text, without
dangerously setting HTML:

/**
 * Find and highlight relevant keywords within a block of text
 * @param  {string} label - The text to parse
 * @param  {string} value - The search keyword to highlight
 * @return {object} A JSX object containing an array of alternating strings and JSX
 */
const formatLabel = (label, value) => {
  if (!value) {
    return label;
  }
  return (<span>
    { label.split(value)
      .reduce((prev, current, i) => {
        if (!i) {
          return [current];
        }
        return prev.concat(<b key={value + current}>{ value }</b>, current);
      }, [])
    }
  </span>);
};

formatLabel('Lorem ipsum dolor sit amet', 'dolor');
// <span>Lorem ipsum <b>dolor</b> sit amet</span>

[EliecerC]

I needed something like this for mentions matching some pattern so it can wrap multiple values and did some changes to the @richardwestenra solution. Maybe it will be useful for someone.

/**
 * Find and highlight mention given a matching pattern within a block of text
 * @param {string} text - The text to parse
 * @param {array} values - Values to highlight
 * @param {RegExp} regex - The search pattern to highlight 
 * @return {object} A JSX object containing an array of alternating strings and JSX
 */
const formatMentionText = (text, values, regex) => { 
    if (!values.length)
        return text;

    return (<div>
        {text.split(regex)
            .reduce((prev, current, i) => {
                if (!i)
                    return [current];

                return prev.concat(
                    values.includes(current)  ?
                        <mark key={i + current}>
                            {current}
                        </mark>
                        : current
                );
            }, [])}
    </div>);
};

const text = 'Lorem ipsum dolor sit amet [[Jonh Doe]] and [[Jane Doe]]';
const values = ['Jonh Doe', 'Jane Doe'];
const reg = new RegExp(/\[\[(.*?)\]\]/); // Match text inside two square brackets

formatMentionText(text, values, reg);
// Lorem ipsum dolor sit amet <mark>Jonh Doe</mark> and <mark>Jane Doe</mark>

[rmtngh]

I had a similar issue and I solved it with react portals, to easily find the node, I replaced the string with a div and rendered my react component using createPortal into that div.

[oztune]

@rmtngh I'm curious why you'd need to do that. It seems like it might be overkill. Are you interlacing non-react code?

Regarding solutions to this problem, I'd like to re-recommend string-replace-to-array (I'm the author). It's been battle and time-tested on multiple environments. It's also quite small (the entire library is this file https://github.com/oztune/string-replace-to-array/blob/master/string-replace-to-array.js).

Here's a usage example with regex:

import replace from 'string-replace-to-array'

// The API is designed to match the native 'String.replace',
// except it can handle non-string replacements.
replace(
  'Hello Hermione Granger...',
  /(Hermione) (Granger)/g,
  function (fullName, firstName, lastName, offset, string) {
    return <Person firstName={ firstName } lastName={ lastName } key={ offset } />
  }
)

// output: ['Hello ', <Person firstName="Hermione" lastName="Granger" key={ 0 } />, ...]