Wrap text with element using Javascript or jQuery

Question

I have the following HTML code on my page. There is no containing element, it's just in the body.

<b>SqFt per Carton: </b>24.30<br>

Using script, I want to wrap 24.30 in a span tag with a class so the result will look like this:

<b>SqFt per Carton: </b><span class="sqft_cart">24.30</span><br>

How can I do this?

put the html code properly put it on a new line afer 4 spaces. check meta — ghostCoder
– ghostCoder, Commented Dec 28, 2011 at 7:12
following is the code:SqFt per Carton: 24.30 i want it like the following:SqFt per Carton: 24.30 — user818671
– user818671, Commented Dec 28, 2011 at 7:20

user447356 · Accepted Answer · 2011-12-28 08:33:37Z

1

Here is jQuery way to achieve what you asked for by iterating over all text nodes (i.e. text without any tag) in the document, and in case they come right after  tag replace them with  having proper class:

$(document).ready(function() {
    $("body").contents().filter(textNodeFilter).each(function(index) {
        var textNode = $(this);
        if (this.previousSibling && this.previousSibling.tagName.toLowerCase() === "b") {
            var value = textNode.text();
            var oSpan = $("<span>").html(value).addClass("sqft_cart");
            textNode.replaceWith(oSpan);
        }
    });
});

function textNodeFilter() {
    return this.nodeType == 3;
}

Live test case.

answered Dec 28, 2011 at 8:33

user447356

Sign up to request clarification or add additional context in comments.

2 Comments

user818671 Over a year ago

but there are many tags in the page so it will replace for all right?

user447356 Over a year ago

Yes it will replace all "pure text" that come right after .

Andreas Louv · Accepted Answer · 2011-12-28 09:42:49Z

1

$("b").parent().contents().filter(function() {
    return this.nodeType != 1;
}).wrap("<span class='sqft_cart'></span>");

http://jsfiddle.net/FW8Ct/4/

answered Dec 28, 2011 at 9:42

Andreas Louv

47.3k14 gold badges109 silver badges126 bronze badges

Comments

ThinkingStiff · Accepted Answer · 2011-12-28 09:13:29Z

Since you don't have a containing element you can use .nextSibling() to get the text node for 24.30. Then .insertAdjacentHTML() inserts the new span after deleting the old text node. Since I don't know what the rest of your page looks like, I'll assume there could be multiple  elements, but the code will work either way.

Demo: http://jsfiddle.net/ThinkingStiff/6ArzV/

Script:

var bs = document.getElementsByTagName( 'b' );

for( var index = 0; index < bs.length; index++ ) {

    if( bs[index].innerHTML.indexOf( 'SqFt per Carton:' ) > -1 ) {
        var text = bs[index].nextSibling,
            span = '<span class="sqft_cart">' + text.nodeValue + '</span>';
        text.parentNode.removeChild( text );
        bs[index].insertAdjacentHTML('afterEnd', span);
    };

};

HTML:

<b>SqFt per Carton: </b>24.30<br>
<b>Price per Carton: </b>193.00<br>
<b>SqFt per Carton: </b>12.90<br>
<b>Price per Carton: </b>147.00<br>
<b>SqFt per Carton: </b>14<br>

CSS:

.sqft_cart {
    color: red;
}

Output:

enter image description here

XepterX · Accepted Answer · 2011-12-28 07:17:50Z

0

you could get the value of SqFt per Carton: 24.30 by using

var takentext = $("class Or ID of SqFt per Carton").text();
$("class of span").text(takentext);

answered Dec 28, 2011 at 7:17

XepterX

1,0116 silver badges16 bronze badges

Collectives™ on Stack Overflow

Wrap text with <span> element using Javascript or jQuery

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related