子字符串堆栈拆分 - 正则表达式

Question

我正在尝试根据正则表达式匹配将一个字符串拆分为 stack/array 个字符串。该字符串可以嵌入 Remix Icon，我将根据定位提取和呈现 HTML 属性。

Objective

图标名称前后用:包裹。 objective 是像这样拆分字符串：

"Select an option:ri-arrow-down-s-line:" ---> ["Select an option", ":ri-arrow-down-s-line:"]
"Download :ri-download-line: or upload :ri-upload-line:" ---> ["Download ", ":ri-download-line:", " or upload ", ":ri-upload-line:"]
":ri-download-line:" ---> [":ri-download-line:"]

发生了什么事

我试过使用 this.label.split(/:ri-.*:/)，但它不在结果堆栈中包含图标名称，并且不支持重复。像“下载 :ri-download-line: 或上传 :ri-upload-line:”这样的东西给出了 ['Download ', ''] 的输出。

改进 1：使用 /:ri-[^:]*:/ 改进了字符串拆分，并解决了重复问题。但是现在我需要弄清楚如何将匹配的正则表达式包含在相应位置的堆栈中

有人能给我指出正确的方向吗？

Answer 1

您可以使用这个简单的 refex 进行拆分：

/(?=:ri)/g

只要右边有 :ri，它就会分裂。

请注意，它使用 global 标志，因此它可以匹配和拆分所有事件。

现在你有了一个数组。如果您想要问题中显示的语法，可以在结果上使用 JSON.stringify。

Answer 2

您可能在拆分 /(:ri-[^:]+:)/ 中使用捕获组将其包含在结果中，那么您可能必须从拆分结果中过滤空元素：

const Split = s => s.split(/(:ri-[^:]+:)/).filter(Boolean);

console.log(Split("Select an option:ri-arrow-down-s-line:"))
console.log(Split("Download :ri-download-line: or upload :ri-upload-line:"))
console.log(Split(":ri-download-line:"))

Answer 3

不是在 1 上拆分，它可以同时匹配两者。

例如：

const label = "Download :ri-download-line: or upload :ri-upload-line:"

let arr = label.match(/(:ri-[^:]*:)|[^:]+/g);

console.log(arr);

子字符串堆栈拆分 - 正则表达式

Substring Stack Split - Regex

javascript

regex

arrays

string

split

Objective

发生了什么事