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:
In this case:
\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:
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.
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:
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.
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.
The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
The technical storage or access that is used exclusively for statistical purposes.The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.