javascript - How to insert `<span id="myspanid"><span>` to all content between htm

admin管理员组

文章数量:1356373

Fore example, I want to change

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

to

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

I prefer to do this at server side with php.

Fore example, I want to change

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

to

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

I prefer to do this at server side with php.

• javascript
• html

Share Improve this question Follow edited Apr 14, 2011 at 2:03 user570494 asked Apr 14, 2011 at 1:51 user570494user570494 56733 gold badges88 silver badges1414 bronze badges 1

• 3 Element IDs must be unique. Use <span class="myspanid">...</span> instead. – Matt Ball Commented Apr 14, 2011 at 1:52

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

If you're using jQuery:

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

If you're not (to fix @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>';
}

Don't use innerHTML the way suggested in other answers, it will mess with whatever else you have in the element. You need to look for text nodes and wrap them, like this:

// 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);
      }
    }
  }
}());

If you want to run it on a string of HTML, then create a div, insert the string as its innerHTML, run the above function passing it the div, then grab the innerHTML back:

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>

Note that the childNodes collection will differ in different browsers for the same HTML if you have any extra whitespace, so you may need to do some processing there (e.g. if a textNode doesn't have any content, don't wrap it).

If you're not (fixed to 'do it on a string', hopefully):

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

本文标签： javascriptHow to insert ltspan idquotmyspanidquotgtltspangt to all content between html tagsStack Overflow