英文:
How can I color text between single quotes when apostrophes are present?
问题
我正在尝试给单引号中的短语上色。
我尝试过：
chapter = document.querySelector('#chapter');
chapter.innerHTML = chapter.innerHTML
.replace(/'([^']*)'/g, "<span style='color:red'>$1</span>");
但正如您所看到的，我不知道如何避免像 "it's" 或 "Bob's house" 这样的情况。而且，由于某种原因，第一个 ' 被移除了。
英文:
I am trying to color phrases that are in single quotations.
I tried:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
chapter = document.querySelector('#chapter');
chapter.innerHTML = chapter.innerHTML
.replace(/'([^']*)'/g, "<span style='color:red'>$1</span");
<!-- language: lang-html -->
<div id="chapter">It's Bob's house.</div>
<!-- end snippet -->
But as you can see I don't know how to avoid cases like "it's" or "Bob's house". Also, for some reason the first ' gets removed.
答案1
得分: 2
你可以尝试将所有缩写中的单引号转换成插入符号的序列，执行高亮操作，最后再将插入符号恢复成单引号。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const chapter = document.querySelector('.chapter');
const highlightQuotes = (element, fg = 'inherit', bg = 'inherit') => {
const style = `background:${bg};color:${fg}`;
element.innerHTML = element.innerHTML
.replace(/\b'\b/g, '^^^') // 缩写，例如 don't, he's
.replace(/(?<!'\w+)'(?= )/g, '^^^') // 所有格，例如 Luis'
.replace(/\^\^\^(\w+)\^\^\^/g, "'$1'") // 如果上述两者都运行了，修复
.replace(/'([^']+)'/g, `<span style="${style}">$1</span>`)
.replace(/\^\^\^/g, "'"); // 修复原始的单引号
};
highlightQuotes(chapter, 'red', 'yellow');
<!-- language: lang-html -->
<div class="chapter">
<p>'He's considered lucky with that curse?!'</p>
<p>Almost like he was trying to 'bite at Su Yang's handsome face.'</p>
<p>'I like Luis' shirt.'</p>
<p>'abc' def</p>
<p>Foo's' bar</p>
</div>
<!-- end snippet -->
正如Andy建议的那样，你也可以使用以下方式实现相同的效果：/'(.*)'/g
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const chapter = document.querySelector('.chapter');
const highlightQuotes = (element, fg = 'inherit', bg = 'inherit') => {
const style = `background:${bg};color:${fg}`;
element.innerHTML = element.innerHTML
.replace(/'(.*)'/g, `<span style="${style}">$1</span>`)
};
highlightQuotes(chapter, 'red', 'yellow');
<!-- language: lang-html -->
<div class="chapter">
<p>'He's considered lucky with that curse?!'</p>
<p>Almost like he was trying to 'bite at Su Yang's handsome face.'</p>
<p>'I like Luis' shirt.'</p>
<p>'abc' def</p>
<p>Foo's' bar</p>
</div>
<!-- end snippet -->
英文:
You could try converting all the single-quotes in contractions to a sequence of carets, perform the highlighting, and finally reverse the carets back into single-quotes.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const chapter = document.querySelector('.chapter');
const highlightQuotes = (element, fg = 'inherit', bg = 'inherit') => {
const style = `background:${bg};color:${fg}`;
element.innerHTML = element.innerHTML
.replace(/\b'\b/g, '^^^') // Contraction e.g. don't, he's
.replace(/(?<!'\w+)'(?= )/g, '^^^') // Possessive e.g. Luis'
.replace(/\^\^\^(\w+)\^\^\^/g, "'$1'") // If both above ran, repair
.replace(/'([^']+)'/g, `<span style="${style}">$1</span>`)
.replace(/\^\^\^/g, "'"); // Repair original apostrophes
};
highlightQuotes(chapter, 'red', 'yellow');
<!-- language: lang-html -->
<div class="chapter">
<p>'He's considered lucky with that curse?!'</p>
<p>Almost like he was trying to 'bite at Su Yang's handsome face.'</p>
<p>'I like Luis' shirt.'</p>
<p>'abc' def</p>
<p>Foo's' bar</p>
</div>
<!-- end snippet -->
As Andy suggests, you can achieve the same thing with: /'(.*)'/g
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const chapter = document.querySelector('.chapter');
const highlightQuotes = (element, fg = 'inherit', bg = 'inherit') => {
const style = `background:${bg};color:${fg}`;
element.innerHTML = element.innerHTML
.replace(/'(.*)'/g, `<span style="${style}">$1</span>`)
};
highlightQuotes(chapter, 'red', 'yellow');
<!-- language: lang-html -->
<div class="chapter">
<p>'He's considered lucky with that curse?!'</p>
<p>Almost like he was trying to 'bite at Su Yang's handsome face.'</p>
<p>'I like Luis' shirt.'</p>
<p>'abc' def</p>
<p>Foo's' bar</p>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论