Question

我想使用RegExp将带引号的文字加粗。

例如

var string = 'Hello "Joe"';
var regex = new RegExp(/"[a-zA-Z]"/g);
var el = document.getElementById('element');
el.innerHTML = string.replace(regex, ???); // Here '???' means I don't know what to write at second argument.

我是RegExp的新人，所以请不要理会我的上述代码。

Answer 1

将<span>与类highlight一起使用以包装引用的文字。

RegEx /"[a-zA-Z]"/g将仅匹配双引号内的单个字母。要匹配双引号内的单个单词，请在字母字符类上使用+量词。 /"[a-zA-Z]+"/g。这可以通过使用不区分大小写的标记i，/"[a-z]+"/gi来缩短。

要匹配双引号内的任意数量的字词，请使用RegEx "([^"]+)"。然后可以使用第一个捕获的组$1访问匹配。

var regex = /"([^"]+)"/g;
var el = document.getElementById('element');
el.innerHTML = el.innerHTML.replace(regex, '<span class="highlight">$1</span>');

var regex = /"([^"]+)"/g;
var el = document.getElementById('element');
el.innerHTML = el.innerHTML.replace(regex, '<span class="highlight">$1</span>');

span.highlight {
  color: green;
  font-weight: 700;
}

<div id="element">Dennis Ritchie the creator of C used "Hello World!" to try out the language, and from then it has become the standard to use "Hello World".</div>

要匹配单引号/双引号，您可以使用RegEx /(["'])(.*?)\1/g。

(["'])：匹配单引号（'）或双引号（"）一次，将匹配添加到第一个捕获的组。也可以写成("|')
(.*?)：匹配任何非换行非贪婪的内容，在第二个捕获的群组中添加匹配
\1：反向引用。使用第一个捕获组的匹配。

要使用此RegEx替换，请使用第二个捕获的组$2。

.replace(regex, '<span class="highlight">$2</span>');

var regex = /(['"])(.*?)\1/g;
var el = document.getElementById('element');
el.innerHTML = el.innerHTML.replace(regex, '<span class="highlight">$2</span>');

.highlight {
  background: yellow;
  border-radius: 5px;
  font-size: 1.2em;
}

<div id="element">Lorem ipsum "dolor" sit amet, consectetur adipisicing 'elit', sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 'laboris' nisi ut aliquip ex ea commodo consequat. Duis aute irure "dolor" in reprehenderit in 'voluptate' velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

要设置突出显示文本的样式，可以使用类highlight。

CSS：

.highlight {
    background: yellow;
    font-size: 1.2em;
    ...
}

Answer 2

如果RegEx不是强制性的，那么：）

var str = 'Hello "Joe"';
str = str.split("\"").map(function (value, index) {
    if(index % 2 == 0) {
        return value
    } else {
        return "<span>" + value + "</span>"
    }
}).join("");

此输出

"Hello <span>Joe</span>"

代码说明：

按双引号"拆分并获取数组。奇数索引处的项目将是引号内的项目。
迭代数组并将奇数索引处的项替换为<span> value </span>封装的值
使用空字符串""

突出显示引用的文本

2 个答案: