How to break a sentence into different parts in css - css

Question

I want to break a sentence in 3 parts using css, e.g., United States ("US") - Tax reforms
Here I want to name 3 parts from the sentence.
name: United States
symbol: US
subject: Tax reforms
I know I can use (" to yield name, (" and ") to yield symbol, and ") - to yield subject. But I don't know how to.
I looked up on "word-break" but it doesn't seem to achieve what I want.

Answer 1

You cannot use CSS for splitting a string into parts. You simply cannot target single letters with CSS (except for the first letter with the :first-letter pseudo class). See also this question for more information on this subject.
You could use JavaScript combined with e.g. a regular expression. A simple example would be the following (just as a reminder: do not parse user-content directly as HTML for security reasons):
const input = 'United States ("US") - Tax reforms';
const regex = /^([\w\s]+)\s\("(\w+)"\)\s-\s([\w ]+)/;
const result = regex.exec(input);
if (result !== null) {
const resultingObject = {
name: result[1],
symbol: result[2],
subject: result[3]
};
console.log(resultingObject);
document.body.innerHTML = `<p class="name">${resultingObject.name}</p>
<p class="symbol">${resultingObject.symbol}</p>
<p class="subject">${resultingObject.subject}</p>`;
}
.name {
font-weight: bold;
}
.symbol {
font-style: italic;
}
.subject {
text-decoration: underline;
}