Question

我需要根据一些模式为一些单词着色例如，我想为开始或结束或包含模式*test*

的所有单词着色

示例：测试，测试，测试，tesdaf

var row = {
  "Abstract": "This reference is to serve test as a useful reference for testing whether the styling of reference works or not. Adtest all occurrences of 'reference' should be given a color of red tests" 
};

//here i need a truncation for examaple test* 
var wordsToHighlight = 'reference test*';
var result = row["Abstract"];

wordsToHighlight.split(" ").forEach(function (word) {
  result = result.replace(new RegExp(word, "g"),'<span style="color: red;">'+word+'</span>');
});
document.querySelector("#result").innerHTML = result;

<div id="result">

<!-- begin snippet: js hide: false console: true babel: false -->

</div>

通常使用“测试”，“Adtest”等字样。它将全部突出显示。我需要帮助。
寻找你的建议

Answer 1

以更通用的方式替换您要匹配的字词*：

注意：代码应该注意更具体的正则表达式字符，否则它可能会中断，例如带有圆括号的单词会捕获组等。通常它们可以使用{{1进行转义（就像我在正则表达式\中转义*一样）。在字符串中，您需要将/\*/加倍，例如\

编辑：在开头添加正则表达式'\\S*'，在单词结尾处添加(?:\\s|^)，以便(?:\\s|$)不突出显示{test*的最后一部分1}}但是整个单词如果相应的话。（它验证单词周围是否有空格或字符串的开头/结尾）

编辑2 ：遵循最后的评论以及正则表达式无法突出显示连续单词的事实：这是因为空间被捕获并因此被转移到跨度中，从而无法检测到空间跟着这个词。更新时单独捕获空间并在跨度之前和之后重新插入它们。为大写字母添加了Adtest标记。

var row = {
  "Abstract": "This reference is to serve test as a useful reference for testing whether the styling of reference works or not. Adtest all occurrences of 'reference' should be given a color of red tests" 
};

//here i need a truncation for examaple test* 
var wordsToHighlight = 'reference test*';
var result = row["Abstract"];

wordsToHighlight.split(" ").forEach(function (word) {
  word = word.replace(/\*/g, '\\S*');
  result = result.replace(new RegExp('(\\s|^)(' + word + ')(\\s|$)', "gi"),'$1<span style="color: red;">$2</span>$3');
});
document.querySelector("#result").innerHTML = result;

wordsToHighlight = 'This is reference *test*';
result = row["Abstract"];

wordsToHighlight.split(" ").forEach(function (word) {
  word = word.replace(/\*/g, '\\S*');
  result = result.replace(new RegExp('(\\s|^)(' + word + ')(\\s|$)', "gi"),'$1<span style="color: red;">$2</span>$3');
});
document.querySelector("#result2").innerHTML = result;

Answer 2

如果使用正确的正则表达式并替换语法（$ 1），则不必循环。这将完成这项工作：

var row = {
  "Abstract": "This reference is to serve test as a useful reference for testing whether the styling of reference works or not. Adtest all occurrences of 'reference' should be given a color of red tests" 
};

//here i need a truncation for examaple test* 
var wordsToHighlight = new RegExp(/(reference|\S*test\S*)/, 'g');
var result = row["Abstract"];

result = result.replace(wordsToHighlight,'<span style="color: red;">$1</span>');

document.querySelector("#result").innerHTML = result;

<div id="result">

</div>

RegEx的说明：

/(reference|\S*test\S*)/

斜杠/标记正则表达式语法的开头和结尾
圆括号(和)组成一个组，稍后将引用$1（第一组）
管道|是一个OR - 所以我们有reference或\S*test\S*
\S表示除空白之外的所有内容
*表示0次或更多次 - 所以我们有非空格（0到n次），然后是charsequence'test'，后跟非空格（0到n次）

我们将<span>的匹配项替换为范围内匹配的第一组（$1）

如何用Javascript替换

2 个答案: