如何从含<br>的contentEditable元素innerHTML中提取首个文本片段

核心思路 #

将原始HTML字符串按<br>标签分割为多个独立片段，过滤掉空白片段后取首个非空结果即可。

实现方式 #

1. 纯字符串处理（适合简单场景） #

实现逻辑简单，无需操作DOM，适配你给出的仅包含<br>和纯文本的场景：

// 你从div拿到的原始innerHTML内容
const rawHtml = '<br> This is some text <br> <br> Another piece of text'
const firstValidText = rawHtml
  // 按<br>分割为数组，若br是被转义的&lt;br&gt;则将参数改为'&lt;br&gt;'
  .split('<br>')
  // 去除每个片段前后的空格、换行等空白字符
  .map(segment => segment.trim())
  // 过滤掉空内容
  .filter(segment => !!segment)
  // 取第一个有效片段
  .shift()

console.log(firstValidText) // 输出：This is some text

2. DOM解析方案（通用高容错场景） #

如果你的div内容还可能包含其他HTML标签，推荐用DOM解析方式，避免字符串匹配的误差：

const rawHtml = '<br> This is some text <br> <br> Another piece of text'
// 创建临时DOM容器
const tempDiv = document.createElement('div')
tempDiv.innerHTML = rawHtml

let firstValidText = ''
// 遍历所有子节点找第一个非空文本节点
for (const node of tempDiv.childNodes) {
  if (node.nodeType === Node.TEXT_NODE) {
    const trimmed = node.textContent.trim()
    if (trimmed) {
      firstValidText = trimmed
      break
    }
  }
}

console.log(firstValidText) // 输出：This is some text

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