Chrome中JS渲染文本换行丢失，如何统计选中网页文本段落数？

解决方案：统计网页选中文本的段落数量 #

浏览器会自动合并HTML中的多个空白字符（包括换行、空格），导致选中的纯文本丢失原始的\n\n分隔符，这就是直接用split("\n\n")失效的核心原因。以下是两种可行的解决思路：

方案1：纯文本处理（适配复制场景）

网页文本复制后，段落之间通常会保留单个换行符，通过拆分单个换行并过滤空白行即可统计段落：

function countSelectedParagraphs() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return 0;
  
  const selectedText = selection.toString();
  // 按换行分割，过滤空行和纯空白内容
  const paragraphs = selectedText.split(/\n/).filter(line => line.trim().length > 0);
  
  return paragraphs.length;
}

// 使用示例
console.log(countSelectedParagraphs());

优点：简单直接，适配大多数普通网页；缺点：若段落内包含<br>换行，会被误判为新段落。

方案2：DOM结构统计（精准适配网页布局）

网页段落通常对应<p>、<div>等块级元素，直接从DOM结构入手统计选中范围内的块级元素：

function isBlockElement(element) {
  const display = window.getComputedStyle(element).display;
  // 匹配常见的块级显示类型
  return ['block', 'list-item', 'flex', 'grid', 'table'].includes(display);
}

function countSelectedParagraphs() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return 0;
  
  const range = selection.getRangeAt(0);
  const selectedBlocks = [];
  // 遍历选中区域内的所有元素节点
  const treeWalker = document.createTreeWalker(
    range.commonAncestorContainer,
    NodeFilter.SHOW_ELEMENT,
    null,
    false
  );
  
  let currentNode;
  while (currentNode = treeWalker.nextNode()) {
    // 筛选与选中范围相交的块级元素
    if (range.intersectsNode(currentNode) && isBlockElement(currentNode)) {
      selectedBlocks.push(currentNode);
    }
  }
  
  return selectedBlocks.length;
}

// 使用示例
console.log(countSelectedParagraphs());

优点：精准识别网页逻辑上的段落，不会误判段落内的<br>换行；缺点：需根据不同网站布局，调整isBlockElement的判断规则。

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