CODEWITHSUNDEEP
javascriptjquery
Pr3tor
Pr3tor

Reputation: 65

jQuery: how can I move character before letters

I have a html code that cannot be altered directly. 

<span class="class1 class2 class3 "> First name*: </span>

I need to move the * at the begining or the text. The end result should be this:

<span class="class1 class2 class3 "> *First name: </span>

I also need to make the * to be red (I need to add a class only for this character).

Any ideas?

Upvotes: 0

Views: 351

Answers (3)

JNF
JNF

Reputation: 3730

If the problem is the very specific scenario you gave,

$(".class1.class2.class3").each(function() {
   var inner = $(this).html();
   $(this).html("*" + inner.replace("*",""));
}

Upvotes: 2

David Thomas
David Thomas

Reputation: 253308

I'd suggest:

$('span.class1.class2.class3').text(function(i, t){
    /* i is in the index of the current element among those returned,
       t is the text of the current element.
       We return the new text, which is an asterisk, followed by the original text,
       with the asterisk removed (using replace to replace the asterisk with an empty string):
    */
    return '*' + t.replace(/\*/,'');
});

JS Fiddle demo.

If, however, you need a more generic approach (for example if you have multiple elements with the same/similar selectors):

// selects all the span elements, and filters:
$('span').filter(function(){
    // discards the elements that *don't* have '*:' in their text:
    return $(this).text().indexOf('*:') > -1;
// iterates over those elements (as above):
}).text(function(i, t) {
    return '*' + t.replace(/\*/,'');
});

JS Fiddle demo.

In order to 'make it red,' you'd have to manipulate the HTML, rather than just the text, of the element:

$('span').filter(function(){
    return $(this).text().indexOf('*:') > -1;
// Using 'html()' to set the HTML of the 'span' element:
}).html(function(i, h) {
    // creating a span and prepending to the current element
    return '<span class="required">*</span>' + h.replace(/\*/,'');
});

Coupled with the CSS:

.required {
    color: red;
}

JS Fiddle demo.

Further, for simplicity, given that you want to target the * with a class-name (and therefore wrap it in an element-node), you could avoid the string-manipulation and simply float:

$('span').html(function(i,h){
    // simply wrapping the `*` in a span (using html() again):
    return h.replace(/(\*)/,'<span class="required">*</span>');
});

With the CSS:

.required {
    float: left;
    color: red;
}

JS Fiddle demo.

References:

Upvotes: 2

Arie Xiao
Arie Xiao

Reputation: 14082

var span = $('span.class1.class2.class3');
var new_text = span.text().replace(/\*/, '').replace(/^(\s*)/, '\1<span style="color:red;">*</span>');
span.html(new_text);

Demo

Upvotes: 0

Related Questions