如何高亮显示一段字符串?
我的问题在这里我想在一个 block 中突出显示所有单词 a reference
喜欢这张图片
当我在 ""
双引号内包含单词时 var wordsToHighlight =' "word1, word2"'
表示在整个文本中突出显示 word1 word2
我这里的问题需要在全文中高亮双引号内的文字
解释:
* 它是一个 chop 并且效果很好
那个?高亮单词+n个字符
var row = {
"Abstract": "a reference I have a reference server for reference and just a server here server test."
};
var wordsToHighlight = `reference "a reference" reference jus? fo* `;
var result = row["Abstract"];
var words=wordsToHighlight ;
var resultAbstract = row["Abstract"];
var wordsTH2=[], m;
var rx = /["“']([^"”']+)["”']|\S+/g;
while (m=rx.exec(words)) {
if (m[1]) {
var arr = m[1].trim().split(/\s*,\s*/);
for (var i=0; i<arr.length;i++) {
wordsTH2.push(arr[i]);
}
} else {
wordsTH2.push(m[0]);
}
}
//sort wordsTH2 by length in a descending order
wordsTH2.sort(function(a, b){
return b.length - a.length;
});
wordsTH2.forEach(function (word) {
word = word.replace(/\*/g, '\\S*').replace(/\?/g, '.');
//<span style="background-color:yellow;">.*?</span>| it will match terms that are already highlighted and won't touch them since if it matches, Group 1 and 2 are undefined and if Group 1 and 2 match, a term ($2) will get wrapped with the new span
resultAbstract = resultAbstract.replace(new RegExp('<span style="background-color:yellow;">.*?</span>|(\\s|^)(' + word + ')(?=\\s|$)', "gi"),function ($0, $1, $2) { return $1 ? $1 + '<span style="background-color:yellow;">' + $2 + '</span>' : $0; });
});
document.querySelector("#result").innerHTML = resultAbstract;
<div id="result"></div>
最佳答案
问题出在 (\\s|^)
和随后对第 1 组的检查。当 ^
(字符串开头)匹配时, $1
变量的计算结果仍然为 false,并且会用整个值进行替换。
检查第 2 组是否匹配似乎更有意义,将 return $1 ?
替换为 return $2 ?
因为第 2 组不能为空或 null/undefined:
var row = {
"Abstract": "a reference I have a reference server for reference and just a server here server test."
};
var wordsToHighlight = `reference "a reference" reference jus? fo* `;
var result = row["Abstract"];
var words=wordsToHighlight ;
var resultAbstract = row["Abstract"];
var wordsTH2=[], m;
var rx = /["“']([^"”']+)["”']|\S+/g;
while (m=rx.exec(words)) {
if (m[1]) {
var arr = m[1].trim().split(/\s*,\s*/);
for (var i=0; i<arr.length;i++) {
wordsTH2.push(arr[i]);
}
} else {
wordsTH2.push(m[0]);
}
}
//sort wordsTH2 by length in a descending order
wordsTH2.sort(function(a, b){
return b.length - a.length;
});
wordsTH2.forEach(function (word) {
word = word.replace(/\*/g, '\\S*').replace(/\?/g, '.');
resultAbstract = resultAbstract.replace(new RegExp('<span style="background-color:yellow;">.*?</span>|(\\s|^)(' + word + ')(?=\\s|$)', "gi"),function ($0, $1, $2) { return $2 ? $1 + '<span style="background-color:yellow;">' + $2 + '</span>' : $0; });
});
document.querySelector("#result").innerHTML = resultAbstract;
<div id="result"></div>
关于javascript - 使用正则表达式突出显示一组字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49985337/