How to wrap quoted text with span?

Question

I have a question, how can add <span style="color: blue"> to text in quotes.

Example:

.. and he said "Hello, I am Nick"

Using regex I want to achieve this result:

.. and he said <span style="color: blue>"Hello, I am Nick"</span>

I want to know how I can do that with regular expressions. Goal is to apply color only to text inside the quotes.

Answer 1

Using .replaceWith() function you can add span tag between any text with quotes.

 $(document).ready(function() { $("h2"). // all p tags contents(). // select the actual contents of the tags filter(function(i,el){ return el.nodeType === 3; }). // only the text nodes each(function(i, el){ var $el = $(el); // take the text node as a jQuery element var replaced = $el.text().replace(/"(.*?)"/g,'<span class="smallcaps">"$1"</span>') // wrap $el.replaceWith(replaced); // and replace }); }); 

 .smallcaps { color:blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h2>and he said "Hello, i am Nick" and "I am good"</h2> 

Answer 2

Use String.prototype.replace() method:

 var str = document.querySelector('div').textContent; var reg = /(".*\\")+/g var s = str.replace(reg, function(m){ return '<span style="color:blue">'+m+'</span>'; }) document.querySelector('div').innerHTML = s; 

 <div>and he said "Hello, I am Nick", some extra</div> 

Answer 3

If regex is not mandatory, then try this split-map-join as well

 var text = document.getElementById( "el" ).innerHTML; function transform(input) { return input.split("\\"").map( function(item,index){ if( index % 2 != 0 ){ item = '<span style="color: blue">' + item; } return item }).join(""); } document.getElementById( "el" ).innerHTML = transform(text) 

 <div id="el"> and he said "Hello, i am Nick" </div> 

Answer 4

'and he said "Hello, I am Nick"'.replace(/"Hello, I am Nick"/, '<span style="color: blue">$&</span>');

Answer 5

You can use the String's .replace() function as follows:

---

(1) If you want to keep the quotes and have them inside the <span> :

 var source = '---- "xxxx" ---- "xxxx" ----'; var result = source.replace(/"[^"]*"/g, '<span style="color:blue">$&</span>'); console.log(result); $('#container').html(result); 

 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <div id="container"></div> 

Notes:

1. The [^"] sequence in the regular expression defines a set of characters that matches all characters other than a double quote. Therefore, [^"]* matches zero or more characters that are not a double quote.
2. The $& in the replacement string will be replaced with the matched characters.

---

(2) If you do not want to keep the quotes:

 var source = '---- "xxxx" ---- "xxxx" ----'; var result = source.replace(/"([^"]*)"/g, '<span style="color:blue">$1</span>'); console.log(result); $('#container').html(result); 

 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <div id="container"></div> 

1. The parentheses in the regular expression create a capturing group. (Notice that the quotes are not within the capturing group.)
2. The $1 in the replacement string will be replaced with the first capturing group.

---

(3) If you want to keep the quotes, but have them outside the <span> :

 var source = '---- "xxxx" ---- "xxxx" ----'; var result = source.replace(/"([^"]*)"/g, '"<span style="color:blue">$1</span>"'); console.log(result); $('#container').html(result); 

 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <div id="container"></div> 

Note: This is the same as #2, but the quotes are included in the substitution string, so they are put back in the result string.