突出显示引用的文本

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>');

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;
}

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

1. (["']): 只匹配单引号( ') 或双引号( ") 一次，将匹配添加到第一个捕获的组中。也可以写成("|')
2. (.*?): 匹配任何不是换行符非贪婪的东西，在第二个捕获的组中添加匹配
3. \1: 反向引用。使用第一个捕获组的匹配项。

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

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

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

.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可以使用该类。

CSS：

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