Get number from element and wrap with span

Question

I was hoping to indent a number, but the with html generated from my cms I can't seem to hook into the number and apply a style.

<div class="content">
<b>01. Header</b>
Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, anim odio hic autem 
delectus qui labore rerum irure autem 
</div>

I would like to wrap the number in a span. All of the content is the same. 02.[space]Title

<div class="content">
<span="indent">01. </span><b>Header</b>
Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, anim odio hic autem 
delectus qui labore rerum irure autem 
</div>


.indent{
    margin-left: -30px;
}

Here is what I have started but I can't seem to trim it to the first 3 characters including the empty space.

 $('.content b').each(function() {
var tmp = [],
    collecting = false;

$(this).contents().each(function() {
    if (this.nodeType === Node.TEXT_NODE && $.trim(this.nodeValue).length > 0) {
        if (collecting) {
            tmp.push(this);
            return false;
        }
        else {
            collecting = true;
        }
    }

    if (collecting) {
        tmp.push(this);
    }
});

$(tmp).wrapAll('<span class="indent" />');
});

http://jsfiddle.net/hGeuZ/

Muthu Kumaran · Answer 1 · 2012-09-20T08:04:22.167

0

You can try this way

$('.content b').each(function () {
   var txtArr = $(this).text().split(' ');

    $(this).before('<span class="indent">'+txtArr [0]+'</span>')

    txtArr.shift()
    $(this).text(txtArr.join(' '))

});

Here is the demo, http://jsfiddle.net/hGeuZ/19/

edited Sep 20 '12 at 08:04

answered Sep 20 '12 at 05:52

Muthu Kumaran

17,682
5
47
70

Note, for 01. hello world, the result will ony be 01. Hello – Manu Sep 20 '12 at 07:04

score 0 · Answer 2 · answered Sep 20 '12 at 05:54

This is not the most orthodox solution but it might suit your needs:

$('.content b').each(function () {
    var result = $(this).text().replace(/([0-9]+\.)/, '<span class="indent">$1</span>');
    $(this).html(result).find('.indent').remove().insertBefore(this);
});

http://jsfiddle.net/hGeuZ/10/

score 0 · Answer 3 · answered Sep 20 '12 at 06:10

$("b").each(function() {
   var $title = $(this).html();
   var spaceIndex = $title.indexOf(" ");
   var num = $title.substring(0, spaceIndex+1);
   var text = $title.substring(spaceIndex+1, $title.length)
   console.log(num+text);
   num = '<span class="indent">'+ num + '</span>';
   $(this).html(num + text);   

});

score 0 · Accepted Answer · answered Sep 20 '12 at 08:56

For this, one approach I'd suggest is:

$('.content b:first-child').replaceWith(
    function(i,h){
        return h.replace(/(\d+.\s)([\d\D]*)/g,'<span class="indent">$1</span><b>$2</b>');
    });

JS Fiddle demo.

If CSS is an option:

.content {
    counter-increment: headerNumber;
}

.content b:first-child::before {
    content: counter(headerNumber, decimal-leading-zero);
    padding-right: 2em;
    color: #f90;
}

JS Fiddle demo.

Get number from element and wrap with span

4 Answers4