如何使用JavaScript剥离HTML标签时在各行文本间保留空格

原有逻辑直接读取textContent时，<br>这类换行标签本身不会产生文本内容，会导致标签前后的文本直接拼接粘连。只需要在提取文本前，先给所有会产生内容分隔的标签位置插入空格，最后统一整理空白格式即可。

修改后的代码如下：

function strip(html){
   const doc = new DOMParser().parseFromString(html, 'text/html');
   // 匹配所有会产生内容分隔的标签，在标签前插入空格避免文本粘连
   doc.body.querySelectorAll('br, p, div, li, h1, h2, h3, h4, h5, h6, tr, hr').forEach(node => {
       node.before(' ');
   });
   // 提取文本后合并连续空白，去除首尾多余空格
   return (doc.body.textContent || '').replace(/\s+/g, ' ').trim();
}

逻辑说明 #

• 插入空格的标签列表可以根据实际需求调整，除了换行标签<br>外，段落、块级容器、列表项、标题、表格行这类元素本身在浏览器渲染时也会和其他内容产生分隔，一并处理可以覆盖绝大多数HTML文本的剥离场景。
• 最后用正则/\s+/g匹配所有连续的空白字符（包括原HTML里自带的换行、缩进、多插入的空格），统一替换为单个空格，再用trim()去掉首尾多余空格，避免出现多余的空白。

用提供的测试用例验证，最终输出结果为：

This is the first line This is the second line This is the third line

完全符合预期效果。

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