Menu
I want to wrap all body text(each word) into unique span tag.
Before wrap :
<body>
<div>
<p>word word </p>
<div>word word</div>
<ul>
<li>word word</li>
</ul>
</ul>
<p>word word <strong>word</strong> </p>
</div>
</body>
After wrap :
<body>
<div>
<p><span id="1">word</span> <span id="2">word</span> </p>
<div><span id="3">word</span> <span id="4">word</span></div>
<ul>
<li><span id="5">word</span> <span id="6">word</span></li>
</ul>
</ul>
<p><span id="7">word</span> <span id="8">word</span> <strong><span id="9">word</span></strong> </p>
</div>
</body>
I tried this in jquery but it doesn't give what i expect
$('body *').each(function(){
var words = $(this).text().split(" ");
$(this).empty();
$t=$(this);
$.each(words, function(i, v) {
$t.append('<span>'+v+'</span>');
});
});
Thanks in advance, Logan
761
(function (count) {
'use strict';
(function wrap(el) {
$(el).contents().each(function () {
// Node.* won't work in IE < 9, use `1`
if (this.nodeType === Node.ELEMENT_NODE) {
wrap(this);
// and `3` respectively
} else if (this.nodeType === Node.TEXT_NODE) {
var val = $.trim(this.nodeValue);
if (val.length > 0) {
$(this).replaceWith($.map(val.split(/\s+/), function (w) {
return $('<span>', {id: count = count + 1, text: w}).get();
}));
}
}
});
}('body'));
}(0));
http://jsfiddle.net/LNLvg/3/
update: this version does not silently kill the whitspace ;)
(function (count) {
'use strict';
(function wrap(el) {
$(el).filter(':not(script)').contents().each(function () {
if (this.nodeType === Node.ELEMENT_NODE) {
wrap(this);
} else if (this.nodeType === Node.TEXT_NODE && !this.nodeValue.match(/^\s+$/m)) {
$(this).replaceWith($.map(this.nodeValue.split(/(\S+)/), function (w) {
return w.match(/^\s*$/) ? document.createTextNode(w) : $('<span>', {id: count = count + 1, text: w}).get();
}));
}
});
}('body'));
}(0));
http://jsfiddle.net/mtmqR/1/
110
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
