如何用React组件多次替换字符串的一部分?

用户名

如何用另一个react组件再次替换字符串的一部分?这是一个理论上的例子,当然是行不通的……但这是自我解释。

const text = "hello world";
const parts = text.split(" ");

temp1 = parts.map(part => {
  return part.match(/hello/) ?
          `<b>${part}</b>` :          
          part.match(/world/) ?
          `<i>${part}</i>`:
          part
})
text1 = `<div>${temp1.join(' ')}</div>`;

console.log(text1)

结果: <div><b>hello</b> <i>world</i></div>

亚历克斯·L

让我们从没有React开始,并尝试分解您正在做的事情(我将使用字符串而不是jsx):

let text = "hello world";
let reg, parts;

reg = new RegExp(/hello/);
parts = text.split(reg);
temp1 = parts.map(part => part.match(reg) ? `<b>${part}</b>` : part)
text1 = `<div>${temp1}</div>`;

reg = new RegExp(/world/);
parts = text.split(reg);
temp2 = parts.map(part => part.match(reg) ? `<i>${part}</i>` : part)
text2 = `<div>${temp2}</div>`;

console.log(text1)
console.log(text2)
.as-console-wrapper { max-height: 100% !important; top: 0; }

输出为:

<div>, world</div>
<div>hello ,</div>

这是你想要的吗?我假设不是。

顺便说一句,正如您所知,当您创建零件阵列时 parts = text.split(reg);

您首先收到类似的数组["", " world"],其次收到["hello ", ""]

我认为这不是您所期望的,或者至少它无助于实现我认为想要的输出?

假设您实际上希望将此作为输出?-我们称它为“ A”:

<div><b>hello</b> <i>world</i></div>

也许您想要这个?(您的问题不太清楚)-我们称其为“ B”:

<div><b>hello</b></div>
<div><i>world</i></div>

因此,让我们尝试实现A:

const text = "hello world";
const parts = text.split(" ");

temp1 = parts.map(part => {
  return part.match(/hello/) ?
          `<b>${part}</b>` :          
          part.match(/world/) ?
          `<i>${part}</i>`:
          part
})
text1 = `<div>${temp1.join(' ')}</div>`;

console.log(text1)
.as-console-wrapper { max-height: 100% !important; top: 0; }

输出(A):

<div><b>hello</b> <i>world</i></div>

现在让我们尝试B:

const text = "hello world";
const parts = text.split(" ");

temp1 = parts.map(part => {
  return part.match(/hello/) ?
          `<b>${part}</b>` :          
          part.match(/world/) ?
          `<i>${part}</i>`:
          part
})
text1 = temp1.map(part => {
  return `<div>${part}</div>`
})

console.log(text1.join('\n'))
.as-console-wrapper { max-height: 100% !important; top: 0; }

输出(B):

<div><b>hello</b></div>
<div><i>world</i></div>

请编辑您的问题,以确切说明您要寻找的输出。

更新,现在编辑问题后,很清楚所需的输出是什么,所以我现在将其输入响应:

在堆栈溢出代码段上似乎不起作用,

但是它确实可以在codePen中使用:https ://codepen.io/Alexander9111/pen/VwLGzpJ

输出:

在此处输入图片说明

在此处输入图片说明

function Example() {
  const text = "hello world";
  const modText = text.replace(/ /g, ", ");
  const parts = modText.split(",");

  return (
    <>
      {parts.map(part => {
        return part.match(/hello/) ? (
          <b>{part}</b>
        ) : part.match(/world/) ? (
          <i>{part}</i>
        ) : (
          part
        );
      })}
    </>
  );
}

ReactDOM.render(<Example />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root">

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何用字符替换字符串的一部分

如何用锚替换字符串的一部分

如何用附加条件替换字符串的一部分

如何用字符串数组替换句子的一部分?

如何用sed替换多行字符串的一部分

PHP:如何用列表中的一些随机文本替换字符串的一部分

替换字符串的一部分

如何用另一个子字符串替换字符串的一部分

Android-如何用另一个字符串替换字符串的一部分?

如何使用数组替换字符串的一部分

如何替换字符串的一部分

如何从替换中排除匹配字符串的一部分?

如何在PHP中替换字符串的一部分?

如何使用javascript regexp替换字符串的一部分

如何按位置替换字符串的一部分?

如何使用通配符在mysql中删除/替换字符串的一部分?

如何在javascript中替换字符串的一部分

如何动态替换字符串的最后一部分?

如何替换pandas.Dataframe中字符串的一部分?

如何只替换单词的一部分?从字符串中提取整数?

Mysql:如何替换字符串的一部分?

如何替换字符串的一部分

如何在 PHP 中隐藏/替换字符串的一部分?

如何用另一行中的单词替换一行中的一部分字符串?

如何用熊猫中的另一个字符串替换电子邮件地址的一部分?

如何在特定子字符串后替换字符串的一部分

在特定字符串保留部分字符串以在 SQL 中替换后,如何仅替换字符串的一部分?

SQL Server:查找并替换在字符串中多次出现的字符串特定部分的一部分

替换字符串并将其替换为其自身的一部分