😇 学习 - 获取指定元素下的所有文本节点

SLYLXDYMJ

字数：248 字

时长：1 分钟

如题目。

获取元素下的所有文本节点，并返回文本信息

/**
 *  获取元素下的所有文本节点，并返回文本信息
 *  @param { Element } el - 元素
 *  @example
 *    getTextNodeInfosByEl(el)
 *    => [{
 *     node, // 文本节点
 *     text, // 文本内容
 *     startI, // 文本相对于元素总文本的开始位置
 *     endI // 文本相对于元素总文本的结束位置
 *    }]
 **/
function getTextNodeInfosByEl (el) {
  var infos = []
  
  // 递归获取所有的 textNode 节点
  var textNodes = (function () {
    var results = []
    // 这里需要将 nodeList 转为普通的数组，方便后续操作
    var nodeList = Array.apply(null, el.childNodes)
    
    // 递归获取所有的文本节点
    while (nodeList.length) {
      var node = nodeList.shift()
      if (node.nodeType === node.TEXT_NODE) {
        results.push(node)
      }
      else {
        nodeList = [].concat(
          // 转为普通数组
          Array.apply(null, node.childNodes),
          nodeList
        )
      }
    }
    
    return results
  })()
  
  // 记录总的文本长度
  var length = 0
  
  // 整理节点数据
  textNodes.forEach(function (node) {
    var text = node.wholeText || ''
    var startI = length
    var endI = length + text.length
    
    length = endI
    
    infos.push({
      node: node,
      text: text,
      startI: startI,
      endI: endI
    })
  })
  
  return infos
}