CODEWITHSUNDEEP
javascripthtmlregex
Xtigyro
Xtigyro

Reputation: 411

Match any characters within the class before a specific ending

$(document).ready(function() {
          $('[class="any_character/s bgcolor-orange-10"').text(function(i, oldText) {
            return oldText === 'OK' ? 'Warning' : oldText;
          });
        });

I have difficulties understanding how to deal with REGEX-like functionality in JavaScript. How can we replace "any_character/s " with the multiple characters or no character that there may be present in fact?

In my particular example, the classes can be:

1) class="bgcolor-green-10 bgcolor-blue-10 bgcolor-orange-10"

2) class="bgcolor-green-10 bgcolor-orange-10"

3) class="bgcolor-orange-10"

In each case the common between them is that they end with:

bgcolor-orange-10

Upvotes: 0

Views: 45

Answers (2)

Xtigyro
Xtigyro

Reputation: 411

@David Thomas - I've used to greater extent your piece of advice.

This is how it works now:

$(document).ready(function() {
          $('[class$=bgcolor-orange-10]').text(function(i, oldText) {
            return oldText === 'OK' ? 'Warning' : oldText;
          });
        });

@torazaburo: I've used several classes because this is part of an IBM InfoSphere DataStage monitoring I'm trying to develop and every sequence has lots of dependencies. Because my internal monitoring DB does not have an entry "Warning" for a main sequence because they do not actually abort when some of their dependencies abort (don't ask me why - I don't develop them) - I've come up with a solution only on the JS side - if a dependency aborts - it's marked in 'red' and all main seq's with aborted dep's are marked in 'orange' - after the document is loaded - using the solution I change the status from 'OK' to 'Warning'.

Thank you, folks! I do appreciate your nice comments - I know that I'm a true beginner regarding JavaScript - my main experience is Python which is... different.

All your answers helped me to understand how meagre my JS knowledge is - also I've digged into some more articles about JS.

Upvotes: 0

user663031
user663031

Reputation:

The class attribute is not meant to be treated as a string that you build or modify or search on using an attribute selector (you know, the thing that looks like [class="something"]). It's just a space-delimited concatenated representation of the classes on the element. The order of the class names inside it is not significant, and should not be relied on.

If you want to select elements with a particular class, then use the standard .class-name notation, as in

$('.bgcolor-orange-10')

or using the DOM APIs directly

document.getElementsByClassName('bgcolor-orange-10')

or

document.querySelectorAll('.bgcolor-orange-10')

I'm confused, however, by why you have ended up with multiple classes of the form bgcolor-COLOR-10 on your element, which from their names appear to do the same thing and/or conflict with each other. You might want to step back and examine your logic to understand why this is happening.

This question has nothing to do with regexp. The syntax for value within an attribute selector is not a regexp pattern, and regexp is not used to match those values. Even if you did obtain a value for the class attribute, you should not use regexp to detect if particular classes are present--the DOM APIs, and all libraries, have interfaces for that purpose, such as elt.classList.contains or, in jQuery, .hasClass. If you find yourself needing to use regexp because you have constructed class names that contain magic pieces of information that you need to extract, such as data-bob-class and you want to see if the "bob" is there, then you should revisit your approach to class names, because classes are not really designed to encode information this way.

Upvotes: 1

Related Questions