Using .replace in $.each

Question

New to jquery. I already got this running in javascript but am switching to jquery so I can use .each. Is there some special rule preventing me from using JavaScripts .replace inside jQuerys .each?

    var jse_sanitized_title = "";
    var jse_article_title = "";

    var jse_article_titles = $('.jse_article_title');

    $.each(jse_article_titles, function(i) {

    jse_article_title = jse_article_titles[i].innerHTML;

            //error for this says jse_article_titles[i].replace is not a function
    jse_sanitized_title = jse_article_titles[i].replace(/ /g,"_");

})

EDIT: The purpose of the replace is to replace spaces with underscores.

You override the string in each loop! what are you trying to do? — gdoron, May 14 '12 at 18:09
Instead of `$.each(jse_article_titles`, you can do `jse_article_titles.each(`. — gen_Eric, May 14 '12 at 18:10
See [my updated answer](http://stackoverflow.com/a/10588681/601179) please. — gdoron, May 14 '12 at 18:12
You can simply use `.text` and update all the matching selector. See DEMO >> http://jsfiddle.net/skram/WhJGG/ << [Updated answer](http://stackoverflow.com/a/10588678/297641) — Selvakumar Arumugam, May 14 '12 at 18:18

gdoron · Answer 1 · 2012-05-14T18:11:16.517

3

$.each(jse_article_titles, function() {
    jse_article_title = this.innerHTML;
    jse_sanitized_title = jse_article_title.replace(/ /g,"_");
});

After the update, it looks like you want to do something like this:

$('.jse_article_title').each(function(){
    this.innerHTML = this.innerHTML.replace(/ /g,"_");
});

There is another way with jQuery:

$('.jse_article_title').html(function(index, old){
    return old.innerHTML.replace(/ /g,"_");
});

edited May 14 '12 at 18:11

answered May 14 '12 at 18:05

gdoron

147,333
58
291
367

1

+1 for .html() method. That seems like the most appropriate way to do it the "jquery way". – Kevin Nelson May 14 '12 at 18:21
If I was replacing with underscores then putting the string right back where I got it from this would be the best answer. – Jonathan Eckman May 14 '12 at 18:22

score 2 · Accepted Answer · answered May 14 '12 at 18:05

Presumably you mean:

    $.each(jse_article_titles, function(i) {

    jse_article_title = jse_article_titles[i].innerHTML;

            //error for this says jse_article_titles[i].replace is not a function
    jse_sanitized_title = jse_article_title .replace(/ /g,"_");
    jse_article_titles[i].innerHTML = jse_sanitized_title;

})

If you have not already declared jse_article_title, put a var here, like:

var jse_article_title = jse_article_titles[i].innerHTML;

Note that you have to reassign it at the end. Finally, there are no special rules like this. jQuery is just a library.

My mistake. I did declare all variables in my code but I forgot to include them in my example. You get the check. — Jonathan Eckman, May 14 '12 at 18:07

Selvakumar Arumugam · Answer 3 · 2012-05-14T18:16:08.230

EDIT: The purpose of the replace is to replace spaces with underscores.

Updated to use .text() function to set replace all spaces with _

DEMO

$('.jse_article_title').text(function () {
    return this.innerHTML.replace(/ /g, '_');
});

May be you need

jse_sanitized_title = jse_article_title.replace(/ /g,"_"); 
//using the jse_article_title

or

jse_sanitized_title = jse_article_titles[i].innerHTML.replace(/ /g,"_");

or Using jQuery,

jse_sanitized_title = $(this).text().replace(/ /g, "_");

score 0 · Answer 4 · answered May 14 '12 at 18:06

0

Try this:

$.each(jse_article_titles, function() {

    jse_article_title = $(this).html();

    jse_sanitized_title = jse_article_title.replace(/ /g,"_");

})

answered May 14 '12 at 18:06

Belladonna

3,824
2
24
33

Would you mind explaining why? Is it because it's an unnecessary abstraction that does the same thing? – Belladonna May 14 '12 at 18:11
2

@LittleBigBot: Because using the native DOM properties is *slightly* faster than calling the jQuery function to do that for you. – gen_Eric May 14 '12 at 18:12
1

@Vega. Roket, you're right... http://stackoverflow.com/q/10433014/601179 slightly – gdoron May 14 '12 at 18:14

Kevin Nelson · Answer 5 · 2012-05-14T18:30:34.043

To do it the way you were trying (with innerHTML) you need to reference the node with get()...you'd need to do this:

jse_article_titles.get(i).innerHTML

However, you should be able to shorten that a bit.

$('.jse_article_title').each( function() {
    $(this).html( $(this).html().replace(/ /g,"_") );
});

// or

$('.jse_article_title').each( function() {
    this.innerHTML = this.innerHTML.replace(/ /g,"_");
});

// whichever floats your boat

[EDIT]: Sorry, I was wrong about needing .get(). jse_articles_titles[i] is perfectly valid as long as the number is not negative, which is unlikely.

Using .replace in $.each

5 Answers5