按换行符分割文本内容失效问题求助

Hey Julian, let's break down why your split isn't working and fix it right away!

核心问题：你搞混了HTML换行和文本换行符 #

你现在用document.getElementById("demo").innerHTML拿到的是HTML结构字符串，里面的换行显示来自<br>标签，而不是文本中的\r、\n这类换行符。浏览器在解析HTML时，会把代码里的空白换行压缩成空格，只有<br>会被渲染成换行。所以你用/[\r\n]+/这类匹配文本换行的正则去split，相当于在一个完全没有这些字符的字符串上分割，结果数组只会有一个元素（整个字符串）——如果你觉得res[0]是undefined，大概率是测试时的小失误，但本质是正则匹配错了目标。

正确的解决方案 #

要按HTML里的<br>分割内容，你需要匹配<br>标签（考虑到<br>和<br/>两种写法），修改你的split正则即可：

<!DOCTYPE html>
<html>
<body>
<p>Click the button to perfom a global search for the letters "ain" in a string, and display the matches.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo" style="width:490px; background:#ddd;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at commodo enim. Integer dolor elit, elementum vitae mollis eu, lobortis fringilla diam. Maecenas consectetur malesuada sodales. Fusce nec est est, ut bibendum orci. Aenean tellus lectus, consectetur <br> a mattis a, lobortis sit amet mauris. In vitae orci odio. Integer id massa ac elit suscipit bibendum. Vivamus a magna vitae felis ullamcorper elementum. Mauris aliquam euismod elit a mattis. Nam eu felis sed dolor sodales egestas. Sed quis quam augue. Proin bibendum iaculis felis vel pretium. Praesent ultrices sapien eget ante convallis ac iaculis lectus porta. Quisque vel lectus vel nibh facilisis auctor. Donec ac erat est, non pulvinar urna.</p>
<script>
function myFunction() {
  var str = document.getElementById("demo").innerHTML;
  // 匹配<br>或<br/>标签，兼容两种写法
  var res = str.split(/<br\s*\/?>/); 
  var line = res[0]; // 现在res[0]就是<br>之前的第一段内容
  document.getElementById("demo").innerHTML += '<br><br>' + line;
}
</script>
</body>
</html>

额外：如果要处理纯文本换行 #

如果你需要的是纯文本中的换行（比如用户输入的换行），可以先把<br>替换成文本换行符，再用换行正则分割：

var str = document.getElementById("demo").innerHTML.replace(/<br\s*\/?>/g, '\n');
var res = str.split(/[\r\n]+/);

这样就能得到你想要的分割结果啦！

内容的提问来源于stack exchange，提问作者Julian Brooks