For the past week, I have been working on a website for an emergency medical services association. To fit the client’s wishes, the design called for the first word in titles to be blue followed by all other words being red.

I do not know a way to do this with just HTML, so I decided that I would wrap the second through the last words in a span  element. Then I could add some LESS like this to achieve the color effect I wanted.

[code lang=css]
h1,
h2,
h3,
h4,
h5,
h6 {
color: blue;

span {
color: red;
}
}
[/code]

But, how do I get the span element in the titles?

Using Regular Expressions to Add the Span

Regular expressions are a very powerful feature of many languages. They allow us to create very complex rules to match phrases in code, words, etc. We can also “capture” parts of these rules, which will prove useful in this example!

Here is a PHP function with a regular expression example that takes a title and wraps the second through last words in a span  element.

[code lang=php]
function span_the_title( $title ) {
return preg_replace( '#(S+)s(.+)#', '$1 <span>$2</span>', $title );
}
[/code]

Let’s break this down. Notice that I am passing $title in to the function. This is the title that we will actually be filtering in the regular expression. Now take a look at the preg_replace() function. This function takes the following arguments:

1. A regular expression that is the pattern to search for.
2. A string to replace matched expressions with. Notice how I used $1 and $2 in the second argument above. This is because I am referencing part of the matched regular expression from the first argument. More on this later.
3. The third argument is the title, in this case, or really any string.

Let’s Break It Down

Now, let’s break down this regular expression. First, let’s get rid of the # at each end of the regular expression example as these are just delimiters. That leaves us with (S+)s(.+).

So, let’s break this regular expression example into three separate parts to make it easier to understand:

1. (S+)
2. s
3. (.+)

The first part of the regular expression matches any series of 1 or more non whitespace characters, and captures it, which means we can use $1 to reference whatever was captured later.

Here are some string that might match the first part:

• Hello
• 123456
• kjnbhgvfcrt5678iuojkh

As long as there’s no whitespace, and there is at least one character, then our string is good so far.

The second part of the regular expression example, s, matches a single white space. So, at this point, our regular expression is now trying to match any string that contains a series of 1 or more non whitespace characters followed by exactly one white space.

The last part of our regular expression example, (.+), will match one or more of any character (except a new line character) and capture it in $2. This part of the regular expression is used to ensure that we have at least two words with one space between them. Also, capturing this part of the string allows to build our replacement string.

Build the Replacement String

Now that we have $1 (which we know is the word before the space) and $2 (which is everything after the space), we can build our replacement string. Here is our replacement string: $1 <span>$2</span>.

Again, notice how we can use $1 and $2 which reference the capture groups from the regular expression above.

Questions, Comments, Bugs?

If you have any questions or comments please feel free to leave a comment below. If you find a bug in my code, please leave a comment below or ping me on Twitter so I can quickly fix it.

I hope you found this helpful!