Question

我有一个问题，如何将<span style="color: blue">添加到引号中的文字中。

示例：

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

使用正则表达式我想实现这个结果：

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

我想知道如何用正则表达式做到这一点。目标是仅将颜色应用于引号内的文本。

Answer 1

使用.replaceWith()功能，您可以在带引号的任何文本之间添加span标记。

$(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

使用String.prototype.replace()方法：

＆＃13;

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;

＆＃13;

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

＆＃13;

Answer 3

如果正则表达式不是强制性的，那么请尝试此split-map-join

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

您可以使用字符串的.replace()功能，如下所示：

（1）如果你想保留引号并将它们放在<span>：

中

＆＃13;

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

＆＃13;

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

＆＃13;

注意：

正则表达式中的[^"]序列定义了一组字符，这些字符匹配双引号以外的所有字符。因此，[^"]*匹配零个或多个不是双引号的字符。
替换字符串中的$&将替换为匹配的字符。

（2）如果您不想保留引号：

＆＃13;

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

＆＃13;

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

＆＃13;

正则表达式中的括号创建一个捕获组。（请注意，引号不在捕获组中。）
替换字符串中的$1将替换为第一个捕获组。

（3）如果您想保留引号，但将它们放在<span>之外：

＆＃13;

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

＆＃13;

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

＆＃13;

注意：这与＃2相同，但引号包含在替换字符串中，因此将它们放回到结果字符串中。

如何用span包装带引号的文本？

5 个答案: