javascript - 用元素替换 TextNode 中间的文本

Question

我想用 TreeWalker 在文本节点中插入 html 标签，但 TreeWalker 强制我的 html 括号进入 & lt; >不管我试过什么。这是代码:

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;
}

使用\< 或 "而不是 ' 不会有帮助。我的解决方法是将所有 DOM 树复制到一个字符串并用它替换 html 正文。它适用于非常简单的网页并解决了我的第一个问题，但这是一个糟糕的 hack，除了一个微不足道的页面之外什么都不会起作用。我想知道我是否可以直接使用文本节点而不是使用解决方法。这是(当前有问题的)解决方法的代码:

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" }

然后它将围绕匹配项拆分文本节点并在该位置注入(inject)一个元素。您还可以返回一个字符串数组或那些对象(并且可以递归地使用数组、字符串或对象作为 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]
      }
    ];
  });