用反应jsx元素替换字符串中的多个字符串

Question

我有一个名为 I want to order cheese chicken pizza. 的字符串。
我想用 cheese 替换 cheese，用 chicken 替换鸡肉。
所以我希望结果像 I want to order cheese chicken pizza.

在一个数组中，我有 let arr = ['cheese', 'chicken'] 这样的数据。我采用了以下方法：-

let text = "I want to order cheese chicken pizza."
arr.map(a=>{
  let findText = new RegExp(a, 'g');
  text = text.replace(findText, (match)=>(<span>{match}</span>))
});
return text;

我得到了结果I want to order [object object] [object object] pizza. 我检查了最大的解决方案是替换单个相同的字符串。我想实现这一点，因为我会在每个 span 标签中添加 eventListener 以获取详细信息。

谁能帮帮我。谢谢:)

Answer 1

问题是您正在处理字符串，无法将跨度插入到字符串中。您可以只处理 JSX 或只处理字符串——这在一定程度上取决于您的情况（不确定您计划如何在 span 上添加事件侦听器）。这是只有字符串的样子：

let arr = ['cheese', 'chicken']
let text = "I want to order cheese chicken pizza."
arr.map(a=>{
  let findText = new RegExp(a, 'g');
  text = text.replace(findText, (match)=>(`<span>${match}</span>`))
});
return text;

Answer 2

正如 Joans 所概述的那样，挑战在于您要尝试混合使用 JSX 和字符串。但是，有一些解决方法。您应该做的第一件事是将字符串数组转换为元素对象。所以这个：

let arr = ['cheese', 'chicken']

应该是：

const Elems = {
  cheese: (
    <span
      style={{ color: "red", marginRight: "5px" }}
      onClick={() => alert("clicked cheese span")}
    >
      cheese
    </span>
  ),
  chicken: (
    <span
      style={{ color: "red", marginRight: "5px" }}
      onClick={() => alert("clicked chicken span")}
    >
      chicken
    </span>
  )
};

注意每个 span 元素是如何附加 onClick 的，这样您就可以捕获点击事件。您可以添加任何其他内容。

然后，我们的想法是将您的文本分成一个数组，例如：

["I", "want", "to", "order", "cheese", "chicken", "pizza."]

用 Elems 对象中的相应值替换那些数组元素（奶酪和鸡肉）。然后渲染它。简单！此函数将为您执行此操作：

const swapText = () => {
    const text_array = text.split(" ");
    const a = text_array.map((item) => {
      if (item in Elems) item = Elems[item];
      else item += " ";
      return item;
    });

    return a;
  };

然后像这样渲染它：

{swapText().map((item) => item)}

就是这样。这是一个沙盒供您使用：https://codesandbox.io/s/hardcore-lalande-vxwu6?file=/src/App.js

用反应jsx元素替换字符串中的多个字符串

Replace multiple strings within string with react jsx element

replace

reactjs

regexp-replace