如何插入` <span id=“myspanid”></span> `到html标记之间的所有内容？

Question

例如，我想改变

<h1>content1</h1><p>content2</p>

至

<h1><span id="myspanid">content1</span></h1><p><span id="myspanid">content2</span></p>

我更喜欢用php在服务器端执行此操作。

Answer 1

如果您使用的是jQuery ：

$('body *').wrap('<span class="foo"></span>');

如果您不是（修复@minitech的代码 ）：

var elts = document.body.childNodes,
    numElts = elts.length,
    elt;
for(var i = 0; i < numElts; i++) {
    elt = elts[i];
    elt.innerHTML = '<span class="foo">' + elt.innerHTML + '</span>';
}

Answer 2

不要使用其他答案中建议的方式使用innerHTML，它会与元素中的其他内容混淆。 您需要查找文本节点并包装它们，如下所示：

// Pass either an id or a DOM element
var wrapContent = (function() {

  // This could be passed as a parameter
  var oSpan = document.createElement('span');
  oSpan.className = 'mySpanClass';

  return function(id) {
    var el = (typeof id == 'string')? document.getElementById(id) : id;
    var node, nodes = el && el.childNodes;
    var span;
    var fn = arguments.callee;

    for (var i=0, iLen=nodes.length; i<iLen; i++) {
      node = nodes[i];
      if (node.nodeType == 3) {
        span = oSpan.cloneNode(false);
        node.parentNode.insertBefore(span, node);
        span.appendChild(node);
      } else {
        fn(node);
      }
    }
  }
}());

如果要在HTML字符串上运行它，则创建一个div，将字符串插入为它的innerHTML，运行上面的函数，将其传递给div，然后再获取innerHTML：

function wrapHTMLstring(s) {
  var el = document.createElement('div');
  el.innerHTML = s;
  wrapContent(el);
  return el.innerHTML;
}

alert(wrapHTMLstring('<h1>content1</h1><p>content2</p>'));"
// <h1><span class="mySpanClass">content1</span></h1><p><span class="mySpanClass">content2</span></p>

请注意，如果您有任何额外的空格，则对于同一HTML，childNodes集合在不同的浏览器中会有所不同，因此您可能需要在此处进行一些处理（例如，如果textNode没有任何内容，请不要包装它）。

Answer 3

如果您不是（希望“固定在字符串上”）：

var b = document.body.childNodes;
for(var i = 0; i < b.length; i++) {
     if(b[i].nodeType === 1) {
         b[i].innerHTML = '<span class="foo">' + b[i].innerHTML + '</span>';
     } else if(b[i].nodeType === 3) {
         var newElement = document.createElement('span');
         newElement.className = "foo";
         b.replaceChild(newElement, b[i]);
     }
}