javascript 如何将 `<span id="myspanid"></span>` 插入 html 标签之间的所有内容?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5657721/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to insert `<span id="myspanid"></span>` to all content between html tags?
提问by user570494
Fore example, I want to change
例如,我想改变
<h1>content1</h1><p>content2</p>
<h1>content1</h1><p>content2</p>
to
到
<h1><span id="myspanid">content1</span></h1><p><span id="myspanid">content2</span></p>
<h1><span id="myspanid">content1</span></h1><p><span id="myspanid">content2</span></p>
I prefer to do this at server side with php.
我更喜欢在服务器端使用 php 执行此操作。
回答by Matt Ball
If you're using jQuery:
如果您使用jQuery:
$('body *').wrap('<span class="foo"></span>');
If you're not (to fix @minitech's code):
如果你不是(修复@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>';
}
回答by RobG
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:
不要按照其他答案中建议的方式使用 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);
}
}
}
}());
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:
如果你想在一个 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>
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).
请注意,如果您有任何额外的空白,则 childNodes 集合在不同浏览器中对于相同的 HTML 会有所不同,因此您可能需要在那里进行一些处理(例如,如果 textNode 没有任何内容,请不要包装它)。
回答by Ry-
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]);
}
}