ReactJS：从数组中查找和替换字符串答案

【问题标题】：ReactJS: Find and Replace String from an ArrayReactJS：从数组中查找和替换字符串
【发布时间】：2022-11-15 16:52:22
【问题描述】：

我的工具的一部分允许用户在文本字段中输入字符串，检查输入的任何单词是否与预设数组匹配。

如果用户的字符串在数组中包含名称对象，那么我希望将其替换为链接。

我已经创建了函数和 onClick 它应该获取用户的内容，遍历数组以查看是否有任何名称与用户的内容匹配，然后用链接替换该名称。

目前，它只对每个数组对象执行此操作，因为我需要它来替换所有对象并且只返回一个字符串。

  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)
  }

【问题讨论】：

标签： javascript html node.js reactjs javascript-objects

【解决方案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);

【讨论】：

【解决方案2】：

这是一个可能的实现。当您在链接名称后点击空格时，它会触发更改以避免无休止的替换循环。

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>

【讨论】：