如何通过JavaScript获取HTML元素中显示的带自动断字连字符的文本

嘿，这个需求确实有点棘手——毕竟浏览器的自动断字是在渲染层面完成的，DOM里的原始文本根本没包含那些自动插入的连字符，直接用textContent或者innerText肯定拿不到想要的结果。不过别担心，我们可以借助浏览器的Range API来捕捉元素渲染后的行信息，再逆向推导断字位置，把连字符补进去。

下面是一个可行的实现方案，我来一步步拆解：

核心思路 #

1. 先用Range API把目标元素的内容按渲染后的行分割开，拿到每一行的文本内容
2. 对比原始文本的单词，找出哪些行的结尾是被截断的单词片段
3. 在这些截断位置插入连字符，拼接成最终的带断字的文本

具体代码实现 #

function getHyphenatedText(element) {
  // 先拿到原始文本，去除多余空白字符
  const originalText = element.textContent.replace(/\s+/g, ' ').trim();
  const range = document.createRange();
  const lines = [];
  let startOffset = 0;
  const elementRect = element.getBoundingClientRect();
  
  // 计算元素的行高（用来判断不同行的位置）
  const lineCount = Math.ceil(element.scrollHeight / elementRect.height);
  const lineHeight = elementRect.height / lineCount;

  // 用二分法分割每一行的文本
  while (startOffset < originalText.length) {
    range.setStart(element.firstChild, startOffset);
    range.setEnd(element.firstChild, originalText.length);
    const rect = range.getBoundingClientRect();
    
    let endOffset = originalText.length;
    let low = startOffset;
    let high = originalText.length;
    
    // 二分查找当前行的最后一个字符位置
    while (low <= high) {
      const mid = Math.floor((low + high) / 2);
      range.setStart(element.firstChild, startOffset);
      range.setEnd(element.firstChild, mid);
      const midRect = range.getBoundingClientRect();
      
      if (midRect.top === elementRect.top + lines.length * lineHeight) {
        endOffset = mid;
        low = mid + 1;
      } else {
        high = mid - 1;
      }
    }
    
    // 提取当前行的文本并加入行列表
    const lineText = originalText.slice(startOffset, endOffset).trim();
    lines.push(lineText);
    startOffset = endOffset;
  }

  // 处理每行文本，插入断字连字符
  let hyphenatedText = '';
  let prevLineEnd = '';
  const originalWords = originalText.split(/\s+/);
  let wordIndex = 0;

  for (const line of lines) {
    const lineWords = line.split(/\s+/);
    
    // 检查上一行的结尾是不是截断的单词片段
    if (prevLineEnd) {
      const combinedWord = prevLineEnd + lineWords[0];
      if (originalWords[wordIndex - 1] === combinedWord) {
        // 说明是自动断字，把上一行结尾替换成带连字符的形式
        hyphenatedText = hyphenatedText.slice(0, -prevLineEnd.length) + `${prevLineEnd}-`;
        wordIndex--;
      }
    }
    
    hyphenatedText += lineWords.join(' ') + ' ';
    prevLineEnd = lineWords.length ? lineWords[lineWords.length - 1] : '';
    wordIndex += lineWords.length;
  }

  // 清理多余空格，返回最终文本
  return hyphenatedText.trim().replace(/- /g, '-');
}

// 使用示例（确保元素已渲染完成）
document.addEventListener('DOMContentLoaded', () => {
  const targetDiv = document.querySelector('div[lang="en"]');
  const hyphenatedResult = getHyphenatedText(targetDiv);
  console.log(hyphenatedResult);
  // 拿到结果后就可以用在SVG的<text>元素里啦
});

注意事项 #

• 这个方法依赖元素的当前渲染状态，所以一定要等元素完全渲染后再调用（比如放在DOMContentLoaded事件里）
• 不同浏览器的断字规则可能略有差异，最终的连字符位置可能会有一点点不同
• 如果目标元素有复杂的内边距、边框或者自定义行高，可能需要调整行高的计算逻辑来适配

备注：内容来源于stack exchange，提问作者itsaunix