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

Question

我是 React Native 的新手，还不熟悉正则表达式，我想使用正则表达式分割文本。

我只能使用以下代码在 React Native 中处理一个文本符号:

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", ""]

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

Expected Result:

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

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

Answer 1

由于您已经在使用正则表达式，因此您可以使用字符类和反向引用:

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

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

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

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

解释第一个(其他只是中间部分的变体):

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

<小时/>

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