Question

我试图访问给定元素中的所有文本节点，这样我就可以隔离单词并将它们换成跨度。

TreeWalker似乎是这项工作的API，但我发现它非常不直观。 spec和MDN reference（通常很擅长解释神秘的DOM API）都不是我的眼睛不言而喻的。

我的第一个假设是，我需要传递的是正确的过滤器作为第二个参数 - 类似于document.createTreeWalker( element, NodeFilter.TEXT_NODE )。但是，一旦遇到非文本节点，这似乎就会停止：

＆＃13;

wordWrap( document.body )

function wordWrap( element ){
  var nodes = document.createTreeWalker( element, NodeFilter.TEXT_NODE )
  var node
  var text
  var word

  while( node = nodes.nextNode() ){
    text = node.nodeValue.replace( /(^\s+|\s+$)/, '' ).split( /\s+/g )

    while( text.length ){
      word = document.createElement( 'span' )

      word.className = 'word'

      word.innerText = text.shift()

      node.parentNode.insertBefore( word, node )

      if( text.length )
        node.parentNode.insertBefore( document.createTextNode( ' ' ), node )
        }

    node.parentNode.removeChild( node )
  }
}

＆＃13;

.word {
  background: #fee;
  padding: 0 .5em 0 0;
}

＆＃13;

Contact us at <a href="mailto:email@example.com">email@example.com</a> for submissions &#38; other enquiries.

＆＃13;

所以我假设这是一个使用TreeWalker的第三个过滤器参数以及NodeFilter上的额外属性的机会。如果过滤方法的有效返回值为FILTER_ACCEPT，FILTER_REJECT＆amp; FILTER_SKIP，然后我推断通过接受第二个参数中的元素节点和文本节点，我可以指定应该接受文本节点而忽略其余节点。但这似乎给出了相同的结果 - 在锚之内或之后没有拾取文本节点：

＆＃13;

wordWrap( document.body )

function wordWrap( element ){
  var nodes = document.createTreeWalker(
    element,
    NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT,
    { acceptNode : function( node ){
      if( node.nodeType === node.TEXT_NODE )
        return NodeFilter.FILTER_ACCEPT
      else 
        return NodeFilter.FILTER_SKIP
    } } 
  )
  var node
  var text
  var word

  while( node = nodes.nextNode() ){
    text = node.nodeValue.replace( /(^\s+|\s+$)/, '' ).split( /\s+/g )

    while( text.length ){
      word = document.createElement( 'span' )

      word.className = 'word'

      word.innerText = text.shift()

      node.parentNode.insertBefore( word, node )

      if( text.length )
        node.parentNode.insertBefore( document.createTextNode( ' ' ), node )
        }

    node.parentNode.removeChild( node )
  }
}

＆＃13;

.word {
  background: #fee;
  padding: 0 .5em 0 0;
}

＆＃13;

Contact us at <a href="mailto:email@example.com">email@example.com</a> for submissions &#38; other enquiries.

＆＃13;

到目前为止，我确信使用DOM1方法递归遍历树会更容易，就像在这个片段中一样：

＆＃13;

wordWrap( document.body )

function wordWrap( element ){
  textNodes( element ).forEach( function( node ){
    var text = node.nodeValue.split( /\s+/g )
    var word

    while( text.length ){
      word = document.createElement( 'span' )

      word.className = 'word'

      word.innerText = text.shift()

      node.parentNode.insertBefore( word, node )

      if( text.length )
        node.parentNode.insertBefore( document.createTextNode( ' ' ), node )
        }

    node.parentNode.removeChild( node )
  } )
}

function textNodes( element ){
  var nodes = []

  Array.prototype.forEach.call( element.childNodes, function( child ){
    if( child.nodeType === child.TEXT_NODE )
      nodes = nodes.concat( child )
      else if( child.nodeType === child.ELEMENT_NODE )
        nodes = nodes.concat( textNodes( child ) )
        } )

  return nodes
}

＆＃13;

.word {
  background: #fee;
  padding: 0 .5em 0 0;
}

＆＃13;

Contact us at <a href="mailto:email@example.com">email@example.com</a> for submissions &#38; other enquiries.

＆＃13;

我错过了什么？

Answer 1

我错过了什么？

node.parentNode.removeChild(node)是问题 - 你要从DOM中移除当前节点，因此walker将从那里找不到.nextNode()。

你应该在移除节点之前推进助行器，或者只是不移除它而是缩小其内容（当你移出所有单词时留下的内容）。

＆＃13;

wordWrap(document.body);

function wordWrap( element ){
  var nodes = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, null);
  var node;
  while (node = nodes.nextNode()) {
    var p = node.parentNode;
    var text = node.nodeValue;
    var m;
    while(m = text.match(/^(\s*)(\S+)/)) {
      text = text.slice(m[0].length);
      p.insertBefore(document.createTextNode(m[1]), node);
      var word = p.insertBefore(document.createElement('span'), node);
      word.appendChild(document.createTextNode(m[2]));
      word.className = 'word';
    }
    node.nodeValue = text;
  }
}

＆＃13;

.word {
  background: #faa;
  padding: 0 .5em 0 0;
}

＆＃13;

Contact us at <a href="mailto:email@example.com">email @ example.com</a> for submissions &#38; other enquiries.

＆＃13;

_{请注意，正确的过滤器是NodeFilter.SHOW_TEXT，而不是.TEXT_NODE，而在旧浏览器中，这四个参数不是可选的。}

DOM TreeWalker返回所有文本节点

1 个答案: