如何使用JavaScript获取<br>元素结束后的文本内容

针对示例DOM结构：

<div class="div_class">
   <span class="span_class">Artist</span><br>Spy
</div>

要提取<br>后的Spy文本，可通过以下几种方式实现：

• 方法1：通过nextSibling直接获取相邻文本节点
  <br>后的目标文本属于br元素的下一个兄弟文本节点，直接访问节点属性即可，是最简洁高效的实现方式。

  // 定位目标br节点，可根据实际业务场景调整选择器
  const brEl = document.querySelector('.div_class br');
  // 取br的下一个兄弟节点，trim清除前后换行、空格干扰
  const text = brEl.nextSibling.textContent.trim();
  // 输出结果：Spy
  

  注意：如果br和目标文本之间夹杂其他元素/注释节点，需要循环向后查找nodeType === Node.TEXT_NODE的节点，避免取到非文本节点报错。

• 方法2：遍历父容器子节点定位提取
  如果容器内存在多个<br>标签，或者br后存在零散的空白节点，可以遍历父容器的所有子节点，找到br节点后向后查找第一个有效文本节点。

  const container = document.querySelector('.div_class');
  const allNodes = container.childNodes;
  let result = '';
  
  for (let i = 0; i < allNodes.length; i++) {
    const current = allNodes[i];
    // 匹配到br节点
    if (current.nodeName === 'BR') {
      // 从br的下一个节点开始找有效文本
      for (let j = i + 1; j < allNodes.length; j++) {
        const next = allNodes[j];
        if (next.nodeType === 3 && next.textContent.trim()) {
          result = next.textContent.trim();
          break;
        }
      }
      break;
    }
  }
  // 输出结果：Spy
  

• 方法3：正则匹配innerHTML提取
  如果不方便直接遍历DOM节点，也可以先获取父容器的HTML字符串，通过正则匹配<br>标签后的文本内容。

  const container = document.querySelector('.div_class');
  // 兼容<br>、<br/>、<br />多种br写法，提取br后到下一个标签前的文本
  const matchRes = container.innerHTML.match(/<br\s*\/?>\s*([^<]+)/i);
  const result = matchRes ? matchRes[1].trim() : '';
  // 输出结果：Spy
  

  注意：该方法适合结构简单的场景，如果<br>后嵌套了其他HTML标签，需要根据实际结构调整正则规则，优先推荐前两种DOM操作方案，准确性更高。

内容的提问来源于stack exchange，提问作者Theow Meng Ang