Using Javascript and Regular Expressions, easily surround DOM elements with span

Regular Expressions are probably the most powerful tool for detecting certain patterns in a text. Combined with Javascript, they can be utilized to achieve any type of manipulations in the DOM. In this article, I am going to show how to use them to isolate a text in a webpage and surround it with a <span> element. You can use this method to get any html element and assign it an HTML tag, idor class. Then you can style it anyhow you desire using CSS.

In my treaty-based.com project, I wanted to show the letter “v” meaning versus in case names in lowercase and the rest of the text in uppercase. In this case, there is a difficulty: using CSS it is easy to design a text differently from the others, but it is not possible if the texts are under the same HTML element and have the same id or class. At least it’s not possible to do it using HTML or CSS. For this, it is necessary to separate the text that you want to display differently from the others. This is where Javascript and Regular Expressions come to our rescue.

It is possible to assign a different html element, id or class to the text that we want to distinguish from others using Javascript.

What I wanted to achieve was exactly this:

For this, I need to surround the letter v with the span element and then transform it to lowercase with CSS.

Part 1: Detecting the v word using Regular Expressions

First, it is necessary to detect the v in VIVENDI V ARGENTINA. That’s what regular expressions are for. Here, in order to distinguish the letter v from other letters and words in the text, we need to set a rule: find the “v letter with space before and after”. We can write this using regex like this:

/\b(v)\b/i

In this case:

/ the forward slash character is used to denote the boundaries of the regular expression. This character is only used in certain dialects of regular expressions, such as Javascript. We use this at the beginning and end of the regular expression.

\b metacharacter indicates the beginning or end of a word. In our example, v is a word on its own, and this feature distinguishes it from other v letters in other words in the text. Therefore, the expression \b(v)\b finds the letter v, which by itself forms a word.

i searches regardless of lowercase or uppercase.

Since different companies from different countries may be in the position of a claimant in international arbitration, there is a possibility of finding the letters v, which is a word by itself, besides v, which means versus, which we are looking for. For example, there could be a case name VIVENDI V SARL V ARGENTINA. I have not encountered such a situation, but in such a case, the following method can be followed:

/(\b(v)\b)(?!.*\1)/i

In this case:

In addition to the above, we use the expression (?!.*\1) to specify the last occurrence of a character.

?! Negative lookahead. It specifies a group that can not match after the main expression (if it matches, the result is discarded).

. Matches any character except line breaks.

* Quantifier. It matches 0 or more of the preceding token.

\1 Numeric reference.It matches the results of capture group #1.

Now that we have separated the separate word v that precedes the state name using the regular expressions, we can move on to the JavaScript part.

Part 2: Javascript to replace the v with <span>v</span>

Here, we first detect the text we are targeting in the DOM. Then we assign its textContent to a variable. Lastly, we replace the matched v letter with <span>v</span>.

HERE IS THE FULL CODE:

(function() {
let title = document.querySelector("h1>a");
let a = title.textContent;
title.innerHTML = a.replace(/(\bv\b)(?!.*\1)/i, "<span>$1</span>");
})();

We use our code in IIFE (Immediately Invoked Function Expression) so that it doesn’t pollute the global scope.

After placing the Javascript code, you can then style it anyway you want. I will transform is to lowercase using CSS:

h1>a>span {text-transform: lowercase}

That’s it. You may see it in action here.