Question

我想在TreeWalker的文本节点中插入html标签，但是TreeWalker将我的html括号强制插入＆amp; LT; ＆安培; GT;无论我尝试过什么。这是代码：

var text;
var tree = document.createTreeWalker(document.body,NodeFilter.SHOW_TEXT);
while (tree.nextNode()) {
    text = tree.currentNode.nodeValue;
    text = text.replace(/(\W)(\w+)/g, '$1<element onmouseover="sendWord(\'$2\')">$2</element>');
    text = text.replace(/^(\w+)/, '<element onmouseover="sendWord(\'$1\')">$1</element>');
    tree.currentNode.nodeValue = text;
}

使用\＆lt;或者“而不是”将无济于事。我的解决方法是将所有DOM树复制到一个字符串并用它替换html主体。它适用于非常简单的网页并解决了我的第一个问题，但这是一个糟糕的黑客和除了一个简单的页面之外，我不会工作。我想知道我是否可以直接使用文本节点而不是使用解决方法。这是（当前有缺陷的）解决方法的代码：

var text;
var newHTML = "";
var tree = document.createTreeWalker(document.body);
while (tree.nextNode()) {
    text = tree.currentNode.nodeValue;
    if (tree.currentNode.nodeType == 3){
        text = text.replace(/(\W)(\w+)/g, '$1<element onmouseover="sendWord(\'$2\')">$2</element>');
        text = text.replace(/^(\w+)/, '<element onmouseover="sendWord(\'$1\')">$1</element>');
        }
    newHTML += text
}
document.body.innerHTML = newHTML;

编辑：我意识到更好的解决方法是自定义标记文本节点（（Customtag_Start_Here）等），将整个DOM复制到字符串，并使用我的海关标签识别文本节点并以这种方式修改它们。但如果我不必，我宁愿不这样做。

Answer 1

要将文本节点“更改”为元素，您必须replace it with an element。例如：

var text = tree.currentNode;
var el = document.createElement('foo');
el.setAttribute('bar','yes');
text.parentNode.replaceChild( el, text );

如果要保留部分文本节点，并在“中间”注入元素，则需要create another text node和insert it并将元素放入树中适当的位置树。

编辑：这是一个对您有用的功能。：）

给定文本节点，它对文本值运行正则表达式。对于它找到的每个匹配，它会调用您提供的自定义函数。如果该函数返回一个字符串，则替换匹配。但是，如果该函数返回如下对象：

{ name:"element", attrs{onmouseover:"sendWord('foo')"}, content:"foo" }

然后它将在匹配周围拆分文本节点并在该位置注入一个元素。您还可以返回一个字符串数组或那些对象（并且可以递归地使用数组，字符串或对象作为content属性）。

演示：http://jsfiddle.net/DpqGH/8/

function textNodeReplace(node,regex,handler) {
  var mom=node.parentNode, nxt=node.nextSibling,
      doc=node.ownerDocument, hits;
  if (regex.global) {
    while(node && (hits=regex.exec(node.nodeValue))){
      regex.lastIndex = 0;
      node=handleResult( node, hits, handler.apply(this,hits) );
    }
  } else if (hits=regex.exec(node.nodeValue))
    handleResult( node, hits, handler.apply(this,hits) );

  function handleResult(node,hits,results){
    var orig = node.nodeValue;
    node.nodeValue = orig.slice(0,hits.index);
    [].concat(create(mom,results)).forEach(function(n){
      mom.insertBefore(n,nxt);
    });
    var rest = orig.slice(hits.index+hits[0].length);
    return rest && mom.insertBefore(doc.createTextNode(rest),nxt);
  }

  function create(el,o){
    if (o.map) return o.map(function(v){ return create(el,v) });
    else if (typeof o==='object') {
      var e = doc.createElementNS(o.namespaceURI || el.namespaceURI,o.name);
      if (o.attrs) for (var a in o.attrs) e.setAttribute(a,o.attrs[a]);
      if (o.content) [].concat(create(e,o.content)).forEach(e.appendChild,e);
      return e;
    } else return doc.createTextNode(o+"");
  }
}

它不完全通用，因为它不支持属性上的命名空间。但希望这足以让你前进。：）

你会像这样使用它：

findAllTextNodes(document.body).forEach(function(textNode){
  replaceTextNode( textNode, /\b\w+/g, function(match){
    return {
      name:'element',
      attrs:{onmouseover:"sendWord('"+match[0]+"')"},
      content:match[0]
    };
  });
});

function findAllTextNodes(node){
  var walker = node.ownerDocument.createTreeWalker(node,NodeFilter.SHOW_TEXT);
  var textNodes = [];
  while (walker.nextNode())
    if (walker.currentNode.parentNode.tagName!='SCRIPT')
      textNodes.push(walker.currentNode);
  return textNodes;
}

或者如果你想要更接近原始正则表达式的东西：

  replaceTextNode( textNode, /(^|\W)(\w+)/g, function(match){
    return [
      match[1], // might be an empty string
      {
        name:'element',
        attrs:{onmouseover:"sendWord('"+match[2]+"')"},
        content:match[2]
      }
    ];
  });

使用元素替换TextNode中间的文本

1 个答案:

演示：http://jsfiddle.net/DpqGH/8/