JavaScript样式特殊字符之间的所有单词

Question

I am looking to style some words in a string that contain special characters. For instance If I have

"I want to style words in single quotes 'blue' and brackets [red]. There are multiple 'blue' and [red] words in a string"

I would like it to look like this without the special characters

"I want to style words in single quotes <span class='blue'>blue</span> and brackets <span class='red'>red</span>..."

How can I replace the end of the single quote with in the method below?

This is what I have so far.

highlightMessage(message) {
    var text = message.replace(/[\[']+/g, "<span class='red'>")
    var text = message.replace(/]\]']+/g, "</span")
    var text = message.replace(/'/g, "<span class='blue'>")
    //how can I replace the end of the single quote with </span>
    //the method above replaces it with <span class='blue'>

    return message;
}

The other idea I have was to iterate through the string with .split() and check if the word ends with a single quote then replace that but I don't like that solution.

Answer 1

You may perform a single replace operation to achieve what you need:

 var s = "I want to style words in single quotes 'blue' and brackets [red]. There are multiple 'blue' and [red] words in a string"; var res = s.replace(/'([^']+)'|\\[([^\\][]+)]/g, "<span class='$1$2'>$1$2</span>") console.log(res); 

The pattern - '([^']+)'|\\[([^\\][]+)] - matches '...' and [...] substrings and captures their contents, and replaced with the span tags using those contents as the attribute and node value.

Pattern details

• '([^']+)' - a single quote, then Group 1 (later referred to with $1 ) capturing 1+ chars other than ' , and then a '
• | - or
• \\[([^\\][]+)] - a [ char, then Group 2 (later referred to with $2 ) capturing 1+ chars other than [ and ] , and then a ] .

Since $n backreferences are always initialized with an empty string, there is no problem using $1$2 in the replacement: only one of them contains text during each replacement, the other is empty.