检查字符串中的数组元素并用 HTML 标记系统地替换它们 - (JS, ReactJS)

Question

我需要搜索string，如果它有任何与我的array 匹配的值，我需要向它们添加<span></span> 标记以添加自定义CSS。我正在使用 reactJS。

1. 如何在字符串中搜索数组中的对象？ 示例：

   let string = 'this is a message with many inputs, {{input1}}, {{input2}}, and again {{input1}}' let array = [{parameter: '{{input1}}'},{parameter: '{{input2}}'},...] findAllOccurrances = () => {???}

2. 然后系统地将'{{inputX}}'替换为<span className='bizarre-highlight'>{{inputX}}</span>

我的意图是在 div 中与我的array 匹配的任何文本中添加自定义 CSS，所以如果您有任何想法，请拍摄！同样，如果有帮助，请使用 reactJS。

Answer 1

我创建了一个组件，它将用一个跨度替换需要突出显示的元素，您可以对其进行测试here

组件是：

import React from 'react';

export default ({ terms, children }) => {
  const result = []
  const regex = terms.map(escapeRegExp).join('|');
  const re = new RegExp(regex);
  let text = (' ' + children).slice(1); // copy
  let match = re.exec(text);
  while (match != null) {
    const str = match.toString();
    result.push(text.slice(0, match.index));
    result.push(<span className="highlighted">{str}</span>);
    text = text.slice(match.index + str.length);
    match = re.exec(text);
  }
  result.push(text);
  return result;
}

function escapeRegExp (str) {
  return str.replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&");
}

你应该像这样使用它：

import React from 'react';
import Highlighter from './Highlighter';

const terms = [ '{{input1}}', '{{input2}}' ]

const App = () => (
  <div>
    <Highlighter terms={terms}>
      {'this is a message with many inputs, {{input1}}, {{input2}}, and again {{input1}}'}
    </Highlighter>
  </div>
);

Answer 2

使用带有正则表达式的String#replace 查找“{{inputX}}”的所有实例，并使用span 包装匹配项：

const string = 'this is a message with many inputs, {{input1}}, {{input2}}, and again {{input3}}'

const array = [{parameter: '{{input1}}'},{parameter: '{{input2}}'}]

const pattern = new RegExp(array.map(({ parameter }) => parameter).join('|'), 'g');

const result = string.replace(pattern, (match) => 
  `<span className='bizarre-highlight'>${match}</span>`
)

console.log(result)

Answer 3

使用Array#map 提取值以包装在<span> 中，然后循环它们以进行替换：

let string = 'this is a message with many inputs, {{input1}}, {{input2}}, and again {{input1}}';
let array = [{parameter: '{{input1}}'},{parameter: '{{input2}}'}];

array.map(el => { return el.parameter }).forEach(str => {
  string = string.split(str).join("<span className=\'bizarre-highlight\'>" + str + "</span>");
});
    
console.log(string);