从数字点拆分字符串，并仅将点的语句保留在新数组中

Question

我有这个输入-

"\n\nOpen Ended Questions:\n1. What makes Vue a popular choice for web development?\n2. How does Vue compare to other JavaScript frameworks?\n3. What are the advantages of using Vue?\n\nClosed Ended Questions:\n1. Does Vue support server-side rendering?\n2. Is Vue compatible with TypeScript?\n3. Does Vue have a built-in router?"

我想要这个输出-

[
  "What makes Vue a popular choice for web development?",
  "How does Vue compare to other JavaScript frameworks?",
  "What are the advantages of using Vue?",
  "Does Vue support server-side rendering?",
  "Is Vue compatible with TypeScript?",
  "Does Vue have a built-in router?",
]

我试过这个-

 let string = "\n\nOpen Ended Questions:\n1. What makes Vue a popular choice for web development?\n2. How does Vue compare to other JavaScript frameworks?\n3. What are the advantages of using Vue?\n\nClosed Ended Questions:\n1. Does Vue support server-side rendering?\n2. Is Vue compatible with TypeScript?\n3. Does Vue have a built-in router?" // First, remove all line breaks and two strings string = string.replace(/(\r\n|\n|\r)/gm, "").replace('Open Ended Questions:', '').replace('Closed Ended Questions:', ''); // Split the string from this format, "<integer><dot><space>" let result = string.split(/(\d+)\.\ /); // Filter the only items which are not empty and not a number result = result.filter(item => item && isNaN(item)); // Final result console.log(result);

代码解释- .

1. 首先，我删除了所有换行符和一些不需要的字符串。
2. 其次，我从这种格式<integer><dot><space>拆分字符串，即"1. ", "2. "等。
3. 最后，在单独的数组中仅过滤数字点的语句。

该解决方案工作正常，但我不确定它是否是正确的方法，因为这个硬编码删除操作replace('Open Ended Questions:', '').replace('Closed Ended Questions:', '')

谁能建议一种更好/不复杂/正确的方法来做到这一点？

Answer 1

1. 分成几行
2. 过滤行
3. Map 行（删除枚举器）

 const input = "\n\nOpen Ended Questions:\n1. What makes Vue a popular choice for web development?\n2. How does Vue compare to other JavaScript frameworks?\n3. What are the advantages of using Vue?\n\nClosed Ended Questions:\n1. Does Vue support server-side rendering?\n2. Is Vue compatible with TypeScript?\n3. Does Vue have a built-in router?" const lines = input.split('\n'); const listItems = lines.filter((line) => /^\d+\./.test(line)).map((line) => line.replace(/^\d+\./, "").trim()); console.log(listItems);

Answer 2

迭代输入中的行，如果一行匹配 /^\d+\.\s+（即数字点空格），则将该行的/^\d+\.\s+放入数组中：

 input = "\n\nOpen Ended Questions:\n1. What makes Vue a popular choice for web development?\n2. How does Vue compare to other JavaScript frameworks?\n3. What are the advantages of using Vue?\n\nClosed Ended Questions:\n1. Does Vue support server-side rendering?\n2. Is Vue compatible with TypeScript?\n3. Does Vue have a built-in router?" output = [] for (let line of input.split('\n')) { line = line.trim() let m = line.match(/^\d+\.\s+(.+)/) if (m) output.push(m[1]) } console.log(output)

您也可以使用一个正则表达式来做到这一点，但这在 IMO 中可读性较差：

 input = "\n\nOpen Ended Questions:\n1. What makes Vue a popular choice for web development?\n2. How does Vue compare to other JavaScript frameworks?\n3. What are the advantages of using Vue?\n\nClosed Ended Questions:\n1. Does Vue support server-side rendering?\n2. Is Vue compatible with TypeScript?\n3. Does Vue have a built-in router?" output = [...input.matchAll(/^\d+\.\s+(.+)/gm)].map(r => r[1]) console.log(output)

Answer 3

我假设每个问题都以? 并根据您提到的输入字符串以新行\n开头。 考虑到上述模式，这里是实现所需 output 的解决方案。

 // Input string const str = "\n\nOpen Ended Questions:\n1. What makes Vue a popular choice for web development?\n2. How does Vue compare to other JavaScript frameworks?\n3. What are the advantages of using Vue?\n\nClosed Ended Questions:\n1. Does Vue support server-side rendering?\n2. Is Vue compatible with TypeScript?\n3. Does Vue have a built-in router?"; // Splitted the input string based on the new line character '\n' const splittedStr = str.split("\n"); // Filtered out the array items which ends with question mark (?) const questionsArr = splittedStr.filter(str => str.endsWith('?')); // Finally removing the numbers from the starting of the question texts. const res = questionsArr.map(str => str.replace(/^[\d]+\.\ /, '')); // Desired output console.log(res);

Answer 4

使用正后向(?<=)和前向(?=) ：

 const str = "\n\nOpen Ended Questions:\n1. What makes Vue a popular choice for web development?\n2. How does Vue compare to other JavaScript frameworks?\n3. What are the advantages of using Vue?\n\nClosed Ended Questions:\n1. Does Vue support server-side rendering?\n2. Is Vue compatible with TypeScript?\n3. Does Vue have a built-in router?"; const items = str.match(/(?<=^\d+\. +).+?(?=\n|$)/gm) console.log(items);

说明： Regex101.com

• lookbehind: (?<=\n\d+\. +)字符串开头，一位或多位数字，点，一个或多个空格
• 非贪婪匹配.+? 任何字符尽可能少一倍或更多倍
• 前瞻： (?=\n|$)换行符或行尾

没有回顾断言

使用这个简化的正则表达式，它基本上匹配行首^具有数字/s 后跟点和空格模式并捕获剩余的字符串(.+)直到行尾$ （带有全局和多行标志gm ）

/^\d\. (.+)$/gm

Regex101.com演示及解释

要支持基于 WebKit 的浏览器，例如Safari ，不支持 Lookbehind 断言，您可以使用String.prototype.matchAll()来获取具有匹配组的迭代器。 使用 Spread Syntax ...获取二维数组并使用match[1]访问第一个匹配组并使用Array.ptototype.map()将其转换为数组

 const str = "\n\nOpen Ended Questions:\n1. What makes Vue a popular choice for web development?\n2. How does Vue compare to other JavaScript frameworks?\n3. What are the advantages of using Vue?\n\nClosed Ended Questions:\n1. Does Vue support server-side rendering?\n2. Is Vue compatible with TypeScript?\n3. Does Vue have a built-in router?"; const items = [...str.matchAll(/^\d\. (.+)$/gm)].map(m => m[1]); console.log(items);

要额外支持不支持 String.prototype.matchAll() 方法的古老Inte.net Explorer浏览器，请使用.exec() ，例如：

 const str = "\n\nOpen Ended Questions:\n1. What makes Vue a popular choice for web development?\n2. How does Vue compare to other JavaScript frameworks?\n3. What are the advantages of using Vue?\n\nClosed Ended Questions:\n1. Does Vue support server-side rendering?\n2. Is Vue compatible with TypeScript?\n3. Does Vue have a built-in router?"; const reg = /^\d\. (.+)$/gm; const res = []; let m; while(m = reg.exec(str)) res.push(m[1]); console.log(res);

Answer 5

这取决于您的输入以及问题是否始终具有相同的结构？ 如果是，您必须定义一个与您的问题格式匹配的正则表达式，并且从那里您不需要用空字符串替换任何句子：

 let string = "\n\nOpen Ended Questions:\n1. What makes Vue a popular choice for web development?\n2. How does Vue compare to other JavaScript frameworks?\n3. What are the advantages of using Vue?\n\nClosed Ended Questions:\n1. Does Vue support server-side rendering?\n2. Is Vue compatible with TypeScript?\n3. Does Vue have a built-in router?" // ([0-9])+ is the question number and it has to be 1 or more than one character // \. is the dot after question number //.+ is your question // (\?)? the first question mark after the question text let regexp = /([0-9])+\..+(\?)?/g; var questions = string.match(regexp); var result = []; questions.forEach((l) => result.push(l.replace(/([0-9])+\./g,'').trim())); console.log(result);

Answer 6

1. 如果你与新线分开，你会得到

   part 0: part 1: part 2: Open Ended Questions: part 3: 1. What makes Vue a popular choice for web development? part 4: 2. How does Vue compare to other JavaScript frameworks? part 5: 3. What are the advantages of using Vue? part 6: part 7: Closed Ended Questions: part 8: 1. Does Vue support server-side rendering? part 9: 2. Is Vue compatible with TypeScript? part 10: 3. Does Vue have a built-in router?

2. 然后您可以过滤空行和不相关的行。

3. 然后删除开头的数字。