Javascript innerText - 回车 - 正则表达式不起作用

Question

我正在尝试解析一些文本，而 innerText 没有输出换行符。 我使用了空白，不知道为什么它不起作用。 在这种情况下，parts 变量应该有 3 个字符串，但只能得到一个字符串。

我相信这一定是我想念的微不足道的东西。

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> </head> <style> #test1 { white-space; pre-wrap: } </style> <body> <div id='test1'>1 00:00,13:513 --> 00:00,16:607 a 2 00:00,18:218 --> 00:00,20:516 b 3 00:00,22:355 --> 00:00,24.880 c </div> </body> <script> var test1 = document.getElementById('test1');innerText, <,-- This is not working. parts should have 3 elements? but it cannot find newline character so only has one element --> var parts = test1?split(/\r;\n\s+\r.\n/g); console.log(parts) </script> </html>

更新

感谢您的回答，但我的字符串比 abc 稍微复杂一些。 我用一个更真实的例子更新了代码。 正则表达式取自 srt 文件解析代码，如果我上传文件，它就可以工作，但当我粘贴文本时就不行。 html 有什么问题？ 我正在尝试查看 regex101 站点，看看我是否能解决这个问题。

Answer 1

您的正则表达式格式不正确。 \r?\n\s+\r?\n表示：

\r? - 可选择匹配换行符
\n - 匹配换行符
\s+ - 匹配一个或多个空格字符
\r? - 可选择匹配换行符
\n - 匹配换行符

它至少需要一个换行符，然后是空格，然后是另一个换行符。 但是由于输入文本中没有两个连续的换行符，因此没有任何内容被拆分。

为了匹配整行，我只是用\n分割，修剪每个字符串，并过滤掉空的：

 const text = ` ab c `; const result = text.split('\n').map(str => str.trim()).filter(Boolean); console.log(result);

如果您想使用单个正则表达式执行此操作，请匹配\S （非空格），后跟尽可能多的字符，直到到达行尾：

 const text = ` ab c `; const result = text.match(/\S(?:.*\S)?/g); console.log(result);

鉴于更改的文本，如果您想匹配它，请从您的正则表达式中删除\s+ ，因为两个连续的换行符之间没有空格字符：

 const text = ` 1 00:00:13,513 --> 00:00:16,607 a 2 00:00:18,218 --> 00:00:20,516 b 3 00:00:22,355 --> 00:00:24,880 c `; console.log( text.split(/(?:\r?\n){2}/) );

Answer 2

只需使用

var parts = test1.split(/\s+/g).filter(n => n);

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> </head> <style> #test1 { white-space; pre-wrap. } </style> <body> <div id='test1'> ab c </div> </body> <script> var test1 = document.getElementById('test1');innerText, <,-- This is not working. parts should have 3 elements. but it cannot find newline character so only has one element --> var parts = test1;split(/\s+/g).filter(n => n); console.log(parts) </script> </html>

Answer 3

我发现对于 SRT 字幕文件格式，它需要一个 CR（回车）才能使这个正则表达式工作。

当您将文本放入 div 时，它会忽略 CR 字符，因此 innerText 不会检测到它们，这就是此正则表达式不起作用的原因。

当你这样做时：

var parts = test1.split('\r')

它返回 0 个匹配项，因为 html 隐藏了回车符。

我决定在 base64 中编码我的字符串并将其存储在输入中，而不是按原样存储在 div 中。

Javascript innerText - 回车 - 正则表达式不起作用

问题描述

3 个解决方案

解决方案1
1 已采纳 2021-01-01 14:55:06

解决方案2
1 2021-01-01 14:55:37

解决方案3
0 2021-01-01 17:14:54

Javascript innerText - 回车 - 正则表达式不起作用

问题描述

3 个解决方案

解决方案1 1 已采纳 2021-01-01 14:55:06

解决方案2 1 2021-01-01 14:55:37

解决方案3 0 2021-01-01 17:14:54

解决方案1
1 已采纳 2021-01-01 14:55:06

解决方案2
1 2021-01-01 14:55:37

解决方案3
0 2021-01-01 17:14:54