CODEWITHSUNDEEP
javascriptreactjsregexsplit
Unapedra
Unapedra

Reputation: 2373

JS React: replacing regex with component in a string

Given a string with the format:

'This is a string with some ::FaIconUpload:: icons in it as ::FaIconDownload:: these two.'

I'd like to split it using a RegEx and replace the coincidences with some React components. The string would have the type of component (FaIcon) and a props in it such as the name of the icon (Upload).

The objective with this is to be able to use React components within translated strings, and the expected return value would be something like:

[
  'This is a string with some ',
  <FaIcon iconName="Upload" />,
  ' in it as ',
  <FaIcon iconName="Download" />,
  ' these two.'
]

The method

Currently, I've got a method which returns either a string or an array. This is compatible with React render methods, since if we return an array it will be capable of rendering any components on that array.

As I'll use it to translate some strings, I've created this custom hook:

const useCustomTranslation = () => {
  const { t } = useTranslation();

  const tlt = (...args) => {
    // const str = t(...args);
    const testStr =
      'This is a string with some ::FaIconUpload:: icons in it as ::FaIconDownload:: these two.';
    const reg = /(?<=::FaIcon)(.*?)(?=::)/g;

    const preStrAr = testStr.split(reg);
    console.log(preStrAr);
  };

  return { tlt };
};

The problem

Currently, this method is logging this:

[
    "This is a string with some ::FaIcon",
    "Upload",
    ":: icons in it as ::FaIcon",
    "Download",
    ":: these two."
]

As you can see, it's not including the ::FaIcon and the final ::, as I haven't been able to find the right Regex to do so. But even if I got to that point, I feel like then I should have to re-iterate through the array to replace the strings with the right component, again using Regex to see if the array item matches the right format.

I find this somehow overcomplicated, and I think there has to be a much cleaner and easy way to get it (correct me if maybe I'm wrong and this is the only way).

Is there any way where I can split a string using a Regex, using part of the matched group to replace the string by another content using that matched string?

Upvotes: 2

Views: 1513

Answers (2)

Unapedra
Unapedra

Reputation: 2373

Finally, I've made it using (sadly) the re-iteration method, as it's the only way I can see it would work. Thanks to @mplungjan for his first answer, which gave me the hints to get it working:

export const replaceIconInStr = (str) => {
  // Matches the whole icon component pattern 
  const regComponent = /(::FaIcon.*?::)/g;
  // Matches just the component prop we need
  const regIconName = /::FaIcon(.*?)::/g;

  // Split the string by the component pattern
  const splittedStr = str.split(regComponent);

  // If there are any matches
  if (splittedStr.length) {
    // Match the elements in the array and get the prop to replace it by the real component
    return splittedStr.map((el) => {
      const matched = regIconName.exec(el)?.[1];
      if (matched) {
        return <FaIcon iconName={matched} />;
      }

      return el;
    });
  }

  // If there is no pattern matching, return the original string
  return str;
};

Upvotes: 2

mplungjan
mplungjan

Reputation: 177691

Perhaps you meant to do this?

/::FaIcon(.*?)::/ without the look

const str = `This is a string with some ::FaIconUpload:: icons in it as ::FaIconDownload:: these two.`
const newText = str.replace(/::FaIcon(.*?)::/g,function(_,match) {
  return  `<FaIcon iconName="${match}" />`
})
console.log(newText)
To make an array you can do

const str = `This is a string with some ::FaIconUpload:: icons in it as ::FaIconDownload:: these two.`
const newText = str.replace(/\s?::FaIcon(.*?)::\s?/g,function(_,match) {
  return  `::<FaIcon iconName="${match}" />::`
}).split("::")
console.log(newText)

Upvotes: 2

Related Questions