HTML含br标签时innerText拼接单词，如何获取带空格的正确文本

问题根因 #

• textContent的工作逻辑是完全忽略所有HTML标签，直接拼接元素内所有文本节点的内容。原结构中<b>Ranges of</b>的文本Ranges of和后面<b>Exercise</b>的文本Exercise之间仅间隔了<br>标签，没有对应的空白文本节点，因此会直接拼接为Ranges ofExercise。
• 部分浏览器中，位于表格单元格<td>内的<br>标签不会被innerText识别为换行/空格分隔符，因此innerText也会返回拼接错误的结果。

解决方案 #

无需修改原HTML结构，通过临时处理克隆DOM节点的方式即可提取正确文本，不会影响原有页面结构：

function getTextWithBrSeparator(element) {
  // 深度克隆目标节点，完全不修改原DOM
  const clonedNode = element.cloneNode(true);
  // 把克隆节点内所有<br>标签替换为带空格的文本节点
  clonedNode.querySelectorAll('br').forEach(br => {
    br.replaceWith(document.createTextNode(' '));
  });
  // 提取文本后清理多余的连续空格、首尾空格
  return clonedNode.textContent.trim().replace(/\s+/g, ' ');
}

// 调用示例
const targetTd = document.querySelector('td'); // 替换为你的目标元素实例
const correctText = getTextWithBrSeparator(targetTd);
// 输出结果：Ranges of Exercise Prices

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