CODEWITHSUNDEEP
javascriptjquery
Great Scott
Great Scott

Reputation: 1325

Add <span> to part of a label using jQuery

I'm trying to add a span to only part of a label using jQuery. I'm able to isolate the section I want to add the span to (view my fiddle and inspect via the console), but now that I've got that, I don't know how to add the actual span. I need this in order to style a specific section of the label (in this case "red" as an example). Unfortunately, the markup is dynamically generated, so I can't just manually add it.

Here's my fiddle.

Here are my watered-down code snippets if you'd prefer to view them here:

HTML:

<input type="checkbox" /><label> Some Number (XXXXXX1234)</label><br />
<input type="checkbox" /><label> Some Other Number (XXXXXX4567)</label><br />
<input type="checkbox" /><label> Some Number (XXXXXX7890)</label>

CSS:

span {
    color: red;
}

JS:

var label = $('label');

$.each(label, function() {

    var arr = $(this).text().split(' '),
        num = arr[arr.length-1];

    console.log(num);

});

This is what I'm starting with:

<input type="checkbox" /><label> Some Number (XXXXXX1234)</label><br />

And this is what I'm trying to achieve:

<input type="checkbox" /><label> Some Number <span>(XXXXXX1234)</span></label><br />

There will by multiple inputs throughout the site, hence $.each.

I've found partial answers to this dilemma on Stack Overflow, just not the right combination to complete the task.

Upvotes: 1

Views: 6564

Answers (3)

Srini
Srini

Reputation: 348

Try the below working code snippet.I hope it will solve the issue 

var label = $('label');

$.each(label, function() {

    var arr = $(this).text().split(' '),
        num = arr[arr.length-1], modifiedText = '<span>'+num+'</span>', finalText= $(this).text().replace(num, modifiedText);

    $(this).html(finalText)

});

Upvotes: 0

adeneo
adeneo

Reputation: 318222

Match it with a regex and insert the spans in strings returned to the html() function

$('label').html(function(_,html) {
    return html.replace(/(\(.*?\))/, "<span>$1</span>");
});

FIDDLE

If you want to split on spaces and get the last part, you can do that instead

$('label').html(function(_,html) {
    var parts = html.split(" ");
    var last  = parts.pop();
    parts.push('<span>', last, '</span>');
    return parts.join(" ");
});

FIDDLE

Upvotes: 6

Paul Roub
Paul Roub

Reputation: 36438

Finishing up the approach you started with: set the element text to everything before the last section, then append the span and its contents:

var label = $('label');

$.each(label, function() {

  var el = $(this),
     arr = el.text().split(' '),
     num = arr[arr.length - 1],
    rest = arr.slice(0, arr.length - 1).join(' ');

  el.
    text(rest + " ").
    append($('<span>').text(num));
});
span {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="checkbox" />
<label>Some Number (XXXXXX1234)</label>
<br />
<input type="checkbox" />
<label>Some Other Number (XXXXXX4567)</label>
<br />
<input type="checkbox" />
<label>Some Number (XXXXXX7890)</label>

Upvotes: 1

Related Questions