使用SPAN标签处理文本时保留格式并正确处理单词周边标点

页面设置了支持粘贴文本的输入区域，现有逻辑可拆分输入文本的单个单词并匹配对应样式，目标效果：

• 每个单词可点击，点击时触发指定函数，传入当前单词作为参数
• 包裹单词的span标签，将单词本身作为类名添加

现有实现存在两个核心缺陷：

• 重绘文本时会清除原有格式，比如换行符丢失
• 无法分离单词周边的标点，dog.、'dog'、dog会被识别为完全不同的类名

原有实现代码：

const textArea = document.getElementById("text-area") //text input
const renderedText = document.getElementById("rendered-text") //div to add text to
let word
let wordClass

function enterText() {
  renderedText.textContent = textArea.value
  let words = renderedText.outerText.split(" ")
  while (renderedText.hasChildNodes()) {
    renderedText.removeChild(renderedText.firstChild)
  }
  words.map((el) => {
      word = document.createElement("span")
      wordClass = el.toLowerCase()
      word.innerText = el
      word.classList.add(wordClass)
      word.setAttribute("onclick", `testFunc("${wordClass}")`)
      renderedText.appendChild(word)
      renderedText.insertAdjacentHTML("beforeend", " ")
  })
}

核心修复思路 #

• 拆分文本时同时捕获非空白内容块、块后跟随的所有空白字符（包含空格、换行、制表符），渲染时将换行转换为<br>标签，完整保留原排版
• 对每个非空白块做前后遍历，剥离前后附着的标点符号，仅提取核心单词作为类名和点击传参，标点以纯文本形式保留在原位置
• 改用事件监听器绑定点击事件，替代行内onclick字符串拼接，避免特殊字符导致的语法错误和注入风险

完整代码 #

const textArea = document.getElementById("text-area") // 文本输入框
const renderedText = document.getElementById("rendered-text") // 文本渲染容器

// 可根据需求扩展需要过滤的前后标点集合
const PUNCTUATIONS = new Set([
  '.', ',', '!', '?', ';', ':', '"', "'", '`', '(', ')', '[', ']', '{', '}',
  '，', '。', '！', '？', '；', '：', '“', '”', '‘', '’', '（', '）', '【', '】', '《', '》'
])

function enterText() {
  renderedText.innerHTML = ''
  const rawText = textArea.value
  // 正则匹配：非空白字符块 + 块后连续空白字符
  const blockRegex = /(\S+)(\s*)/g
  let match

  while ((match = blockRegex.exec(rawText)) !== null) {
    const rawBlock = match[1]
    const trailingSpace = match[2]
    let start = 0
    let end = rawBlock.length

    // 剥离前缀标点
    while (start < end && PUNCTUATIONS.has(rawBlock[start])) start++
    // 剥离后缀标点
    while (end > start && PUNCTUATIONS.has(rawBlock[end - 1])) end--

    // 渲染前缀标点
    if (start > 0) {
      renderedText.append(document.createTextNode(rawBlock.slice(0, start)))
    }

    // 渲染核心单词span
    if (start < end) {
      const coreWord = rawBlock.slice(start, end).toLowerCase()
      const wordSpan = document.createElement('span')
      wordSpan.textContent = rawBlock.slice(start, end)
      wordSpan.classList.add(coreWord)
      wordSpan.addEventListener('click', () => testFunc(coreWord))
      renderedText.append(wordSpan)
    }

    // 渲染后缀标点
    if (end < rawBlock.length) {
      renderedText.append(document.createTextNode(rawBlock.slice(end)))
    }

    // 渲染尾部空白，保留换行格式
    if (trailingSpace) {
      const spaceSegments = trailingSpace.split('\n')
      spaceSegments.forEach((seg, idx) => {
        if (seg) renderedText.append(document.createTextNode(seg))
        if (idx < spaceSegments.length - 1) renderedText.append(document.createElement('br'))
      })
    }
  }
}

// 业务侧自定义的点击触发函数
function testFunc(word) {
  console.log('当前点击单词：', word)
}

适配说明 #

• 如果需要调整标点过滤规则，直接修改PUNCTUATIONS集合即可
• 如果需要支持连字符单词、带撇号的所有格（比如dog's、state-of-the-art），只需要把对应符号从标点集合中移除，就会被识别为核心单词的一部分
• 给渲染容器添加white-space: pre-wrap样式，可以进一步保留连续空格的显示效果，和输入框排版完全一致

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