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's code）：

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>

请注意，如果您有任何额外的空格，则childNodes集合在不同浏览器中对于相同的HTML会有所不同，因此您可能需要在那里进行一些处理（例如，如果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]);
     }
}

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

3 个答案: