How to use regex to match css elements

Question

I'm calling indexOf on the head section in jQuery. I want to see if CSS contains any font-weight:bold property. The issue is, that property can have 4 alters:

font-weight:bold
font-weight: bold
font-weight :bold
font-weight : bold

How can I match this using regex?

I'm concerned that the approach here may be very problematic. What are you trying to accomplish, that couldn't be accomplished by testing an element like var isBold = $(someSelector).css('font-weight') == 'bold'? — eyelidlessness
– eyelidlessness, Commented May 29, 2012 at 5:18
well, the code i provided were an example only. actually, what im trying to do is to understand if page direction is rtl or not when body css set to direction:rtl. jquery doesn't read direction property, only dir property. — eddyuk
– eddyuk, Commented May 29, 2012 at 6:20
$(someSelector).css('direction') seems to work for me...? It also works correctly with inheritance (e.g. the style is set on a parent of the element I'm inspecting) — eyelidlessness
– eyelidlessness, Commented May 29, 2012 at 19:45

Cylian · Accepted Answer · 2012-05-29 05:24:16Z

4

Try this

\b(?:font-weight\s*:[^;\{\}]*?\bbold)\b

or would be better to use:

\b(?:font-weight[\s*\\]*:[\s*\\]*?\bbold\b)

Explanation

\b                # Assert position at a word boundary
(?:               # Match the regular expression below
   font-weight       # Match the characters “font-weight” literally
   [\s*\\]           # Match a single character present in the list below
                        # A whitespace character (spaces, tabs, and line breaks)
                        # The character “*”
                        # A \ character
      *                 # Between zero and unlimited times, as many times as possible, giving back as needed (greedy)
   :                 # Match the character “:” literally
   [\s*\\]           # Match a single character present in the list below
                        # A whitespace character (spaces, tabs, and line breaks)
                        # The character “*”
                        # A \ character
      *?                # Between zero and unlimited times, as few times as possible, expanding as needed (lazy)
   \b                # Assert position at a word boundary
   bold              # Match the characters “bold” literally
   \b                # Assert position at a word boundary
)

Hope this helps.

edited May 29, 2012 at 5:24

answered May 29, 2012 at 4:50

Cylian

11.2k4 gold badges46 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

eyelidlessness Over a year ago

[^;]*? is too permissive (see fiddle: jsfiddle.net/HcpSQ/1), why not use `\s* instead?

Kobi Over a year ago

I still don't understand why \s* isn't enough here... \bfont-weight\s*:\s*bold\b should do.

eyelidlessness Over a year ago

I still don't understand the advantage of [^;\{\}]. It would still match something like font-weight: invalidcssbutitstillsays-bold. @Kobi jinx.

Cylian Over a year ago

Because if any other styles come within text, still that pattern would not fail.

eyelidlessness Over a year ago

@Cylian, you mean you want to match font-style: normal; something-else: bold;?

|

Oleg · Accepted Answer · 2012-05-29 05:06:04Z

2

Remember that font-weight:bold; could also be set as an integer 700 or through a shorthand font notation which expands the range of strings to match quite a bit.

\b(?:font.*?:[^;]*?\b(bold|700))\b

Fiddled

answered May 29, 2012 at 5:06

Oleg

25.1k8 gold badges64 silver badges94 bronze badges

Comments

Someth Victory · Accepted Answer · 2012-05-29 04:59:07Z

0

Try this:

/font-weight\: bold|font-weight\:bold|font-weight \:bold|font-weight \: bold/

answered May 29, 2012 at 4:59

Someth Victory

4,5592 gold badges26 silver badges27 bronze badges

Comments

Vinod · Accepted Answer · 2012-05-29 05:03:57Z

0

Try this:

RegularExpressionValidator.ValidationExpression = "font-weight\s?:\s?bold"

answered May 29, 2012 at 5:03

Vinod

4,9124 gold badges21 silver badges26 bronze badges

Comments

user123444555621 · Accepted Answer · 2012-05-29 05:32:08Z

0

You cannot use regular expressions for that. CSS may contain strings like so

.foo{ content: "font-weight:bold;" }

You need a proper parser. Luckily the browser has one and offers APIs to access the individual CSS rules.

answered May 29, 2012 at 5:32

user123444555621

154k27 gold badges118 silver badges126 bronze badges

Collectives™ on Stack Overflow

How to use regex to match css elements

5 Answers 5

7 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related