ReactJS: Find and Replace String from an Array

Question

Part of my tool allows a user to enter a string into a textfield, check if any words entered match with a preset array.

If the user's string contains a name object in the array then I want it to be replaced with a link.

I've created the function and onClick it should get the user's content, loop through the array to see if any names match the user's content and then replace that name with a link.

Currently, it's only doing it per array object where as I need it to replace all and only return one string.

  const generateContent = () => {
var arr1 = [{
link: 'https://www.link1.com/',
name: 'Link1'
}, {
  link: 'https://www.link2.com/',
    name: 'Link2'
}];

const findArrayItem =  arr1.find(obj => content.includes(obj.name))
const final = content.replaceAll(findArrayItem.name, "<a href=" + findArrayItem.link + ">" + findArrayItem.name + "</a>")

    setFinalContent(final)
  }

nakzyu · Accepted Answer · 2022-11-15 08:24:28Z

1

const content = 'Link1Link2';
const generateContent = (content) => {
  var arr1 = [
    {
      link: 'https://www.link1.com/',
      name: 'Link1',
    },
    {
      link: 'https://www.link2.com/',
      name: 'Link2',
    },
  ];

  const final = arr1.reduce((a, b) => {
    return a.replaceAll(b.name, '<a href=' + b.link + '>' + b.name + '</a>');
  }, content);

  return final;
};

generateContent(content);

answered Nov 15, 2022 at 8:24

nakzyu

2061 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gazdagergo · Accepted Answer · 2022-11-15 08:45:02Z

0

This is a possible implementation. It triggers the change when you hit a space after the link name to avoid an endless replace loop.

const { useState } = React // for inline use
// import { useState } from 'react' // for normal use

const linkMapping = [
  {
    link: 'https://www.link1.com/',
    name: 'Link1'
  },
  {
    link: 'https://www.link2.com/',
    name: 'Link2'
  }
]

const replaceToLink = (text, linkMapping) => {
  return linkMapping.reduce((acc, { name, link }) =>  {
    return acc.replaceAll(`${name} `, `<a href="${link}">${name}</a> `)
  }, text)
}

const App = () => {
  const [value, setValue] = useState('')
  
  const handleChange = ({ target }) => {
    setValue(target.value)
  }
  
  return (
    <div>
      <textarea value={value} onChange={handleChange} />
      <div dangerouslySetInnerHTML={{ __html: replaceToLink(value, linkMapping) }} />
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

answered Nov 15, 2022 at 8:45

gazdagergo

6,7811 gold badge36 silver badges50 bronze badges

2 Comments

Tom Galland Over a year ago

This works great but only if a user types out the content. Is there a way for a user to paste the content in and it read it?

gazdagergo Over a year ago

It works with paste too as long as you put a space after "Link1". You can enhance this behavior. The only important thing is to detect somehow whether the "Link1" text is wrapped within an anchor tag. If yes, skip replacing it again.

Collectives™ on Stack Overflow

ReactJS: Find and Replace String from an Array

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related