时间戳

首页 > 解决方案 > 如何在本机反应中将包含多个符号的文本拆分为数组？

javascript - 如何在本机反应中将包含多个符号的文本拆分为数组？

问题描述

我是本机反应的新手，还不熟悉正则表达式，我想使用正则表达式拆分文本。

我只能使用下面的代码在本机反应中处理一个文本符号：

mapStringToJSX=(text)=>{
    let rendering=[]
    const nyoba = text.split(/@(.*?)@/g)
    nyoba.map((val,index)=>{
      //handle split text
    })
    return(
      <Text>
        {rendering}
      </Text>
    )
  }

在这里，我可以拆分@第一个和最后一个文本中包含的任何文本，但符号消失了

例如：

string = "sample text contain @at first and last text@"

output = ["sample text contain ", "at first and last text", ""]

string我的问题是如果一个包含多个符号并保持符号存在于数组中，我该如何处理？

预期结果：

string = "I @have@ a text #contain# two sy@mbol@ or @#even more#@"

output = ["I ", "@have@", " a text ", "#contain#", " two sy", "@mbol@", " or ", "@#even more#@", ""]

标签： javascriptregexreact-native

解决方案

由于您已经在使用 Regex，您可以使用字符类和反向引用：

  • 如果您想始终匹配最里面的值，而不接受不成对的嵌套标记

    ([#@])([^#@]*?)\1

  • 如果您想匹配最外层的匹配项，请使用：

    ([#@])(.*?)\1

解释第一个（其他只是中间部分的变体）：

  1. ([#@]): 匹配 # 或 @ 的组。
  2. ([^#@]*?): 零个或多个不是# 或@ 的字符
    • [^#@]: 方括号表示“任何一个”，如果第一个字符是^则表示“没有”
    • 小组和重复的工作方式与您原来的完全一样
  3. \1：完全匹配第一个捕获组的内容（所以要么是 # 要么是 @，但最重要的是，如果开头是 @，那么它只会匹配 @，所以在这种情况下foo#bar@lalal它不会匹配bar，因为 start 和结束标记不同）

此外，如果您想以更直观的方式测试您的正则表达式，我强烈建议您使用Regex101，它会自动显示匹配项和您编写的正则表达式的完整说明。

推荐阅读