1

I have successfully implemented finding and replacing some text with something else in the following way:

$(".class").html($(".class").html().replace(/\text\b/g, '<span class="newclass newclass2">new text</span>'));

When I apply this to my element 'class' it finds all the 'text' and replaces with 'new text' and everything relating to the new classes.

However, if I have more than one element on the page with the same class, it replaces all the classes with whatever text is in the first class.

For example, if my first class has the content "Hello everyone", when the script is applied to this class, it works fine. Any subsequent class of the same name is then replaced with "Hello everyone". These also have the function applied in the same way as the first occurrence of that class.

IE, it applies the script, then replicates this in every single class of the same name on the page.

I do not understand why it would do this, and rather renders the function pointless in many ways if it can't be used to change text throughout different sections without setting up new scripts and different classes.

Hopefully there is something simple at work here that I am not aware of, any help would be much appreciated.

Many thanks

Richard

davidchambers
  • 23,918
  • 16
  • 76
  • 105
Richard Harris
  • 311
  • 1
  • 3
  • 12

3 Answers3

1

That is the nature of class selectors--the .html(...) will replace the HTML of everything that matches the .class selector.

If you want to replace text in each individual .class element, you can use the .each function. (There are probably jQuerier ways, too.)

$(`.class`).each(function(n, el) {
    var myHtml = $(this).html();
    myHtml = mungeIt(myHtml);
    $(this).html(myHtml);
});

If you want to select only an individual .class element, then you either (a) don't really want to be using classes, but IDs, or (b) need to understand enough of your structure or the context you wish to operate in to select only the targeted DOM element.

(And hope the structure or context doesn't change without a corresponding code update.)

Dave Newton
  • 158,873
  • 26
  • 254
  • 302
  • I was going to edit my answer to incorporate ids, but I'll just comment here. If the issue is understanding them they're specified in the jQuery selector as `$('#id')`. Please note that ids are meant to be unique. – Charles Smith Nov 05 '11 at 04:34
  • @jfriend00 It's significantly different; the munging and replacement happens on each element's HTML individually, whereas the original code replaces all selector html with a single value. If the goal is to transform *each selector's* HTML in the same way, this is one way to do that. – Dave Newton Nov 05 '11 at 04:58
  • What is this trying to do, Dave? You're setting the element's `innerHTML` to the element's `innerHTML`. Effectively, `this.innerHTML = this.innerHTML`. Where is the munging mentioned in the code comment? – davidchambers Nov 05 '11 at 07:45
  • Oh I see. It's not a comment, it's a placeholder for the munging code. – davidchambers Nov 05 '11 at 07:47
  • Hello, thank you for your replies. Yes, IDs works fine with the code that I have. If I use IDs instead of classes it only works on the first one and doesn't affect anything else. However, I need it to find the specific word or phrase wherever it might be in certain sections, so will need it to work with classes. I shall have a look at the code you provided, dave, and the .each function and see it it will help. One question, the first this is what is to be found, and the second this is what is to replace it? – Richard Harris Nov 05 '11 at 14:34
  • @RichardHarris No, "this" is always the element you're working with. The myHtml is this's content, transformed with whatever you need it to do, and put back in to the same element. – Dave Newton Nov 05 '11 at 14:37
  • Hello, Thank you for your reply. ALl I really need to do is add classes to the relevant words or phrases. Basically, I have it currently so the word is replaced with a word, with the word staying the same. in which bit of your code would I put the command in order to change the class, and would I still use the .replace function or is there a better way for this purpose? – Richard Harris Nov 05 '11 at 17:22
  • @RichardHarris No problem; hope it helped. If it did, remember to [accept the answer](http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) so future visitors know what was helpful :) If it didn't, just laugh and point ;) – Dave Newton Nov 05 '11 at 17:24
  • @RichardHarris You'd put it where my code calls mungeIt. Replace is probably just fine, of it worked for you before. – Dave Newton Nov 05 '11 at 17:45
  • Hello, Thank you for your replies again, it was usefuly. However, I found something that made more sense to me, it may not be a better way but it works. It uses the 'this' and 'each functions as suggested, so thanks for that i was able to find the right thing. the following link is the code i used, just replaced 'text' with html http://stackoverflow.com/questions/2349446/jquery-find-and-replace-text-after-body-was-loaded – Richard Harris Nov 05 '11 at 18:10
  • @RichardHarris I think you mean `html()` with `text()`. I don't see how that could have made *more* sense, it was the same thing, but ok. – Dave Newton Nov 05 '11 at 18:12
  • Yes, it is very similar I am just not familiar with 'mungeit' and i could easily slot in the coding I had already into that code. thanks for your help though gave me a better understanding so i could find the solution... – Richard Harris Nov 05 '11 at 18:43
  • @RichardHarris ... `mungeIt` isn't real, it's a placeholder for the code you actually need. Separating out the transformation code makes it easier to locate, modify, and test. – Dave Newton Nov 05 '11 at 18:51
0

You're specifying a class with the jQuery selector $(".class") That's what the period indicates. jQuery has a ton of selectors to choose from. A list is provided in the documentation here: http://api.jquery.com/category/selectors/

Also, I'd look at http://api.jquery.com/hasClass/ for your problem as you could then use if...then statements to not run into others

Charles Smith
  • 264
  • 3
  • 13
0

Dave is right about needing to use the .each method. We need to loop through each element at a time because .html() will only return the first element when there are multiple matches.

Try:

$('.class').each(function() {
  $(this).html($(this).html().replace(/someWord/g,'withAnother'));
});
panupan
  • 1,212
  • 13
  • 15