如何用 Javascript 进行替换答案

【问题标题】：How to do replacement with Javascript如何用 Javascript 进行替换
【发布时间】：2018-02-15 15:03:08
【问题描述】：

我需要根据一些模式为一些单词着色
例如，我想为所有开始或结束或包含模式*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”等单词都会突出显示。我需要帮助。
寻找您的建议

【问题讨论】：

你必须用new regExp()把它变成一个正则表达式
我记得回答过一个类似的问题。检查是否有帮助：stackoverflow.com/a/16239900/1249581.
* 必须在正则表达式中替换为 .* 或在 test* 中，这意味着最后一个 t 可以重复任意次数。但是，.* 不会在词尾停止，因此您可以改用 [^\s]*
我宁愿用\S*替换它。
@VasylGutnyk 单词边界不适用于非拉丁字符（你应该知道；））

标签： javascript regex

【解决方案1】：

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

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

编辑：在单词开头添加正则表达式(?:\\s|^)，在单词末尾添加(?:\\s|$)，这样test* 不会突出显示Adtest 的最后一部分，而是整个单词if它对应。（它验证单词周围是否有空格或字符串的开头/结尾）

编辑 2：在最后一个 cmets 和正则表达式无法突出显示连续单词的事实之后：这是因为空格被捕获并因此转移到跨度中，因此无法检测到空格对于以下单词。更新为分别捕获空间并在跨度之前和之后重新插入它们。也为大写字母添加了i 标志。

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;

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

【讨论】：

您在此处遇到错误：您的代码中不再突出显示单词“reference”（带引号）。而且 foreach 循环是不必要的，而且性能不佳。
感谢您的出色工作！！。有可能用大写或小写的单词来做到这一点。例如，我有 Test 它将用“Test”和“test”为所有单词着色。
这实际上是我所期望的，因为我们寻找的是reference，而不是*reference* 或'reference'。如果'应该添加为特殊规则，则没有指定..
@MokiNex 如果您希望它不区分大小写（大写和小写），您只需将i 标志添加到正则表达式作为g 标志的补充。例如：new RegExp("test", "gi")
你也更新了正则表达式的构造吗？圆括号已移动，?: 已被删除，因此它从 RegExp('((?:\\s|^)' + word + '(?:\\s|$)) 更改为 RegExp('(\\s|^)(' + word + ')(\\s|$)

【解决方案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>

正则表达式的解释：

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

斜线/ 标记正则表达式语法的开始和结束
圆括号(和)组成一个组，后面用$1（第一组）引用
管道| 是一个OR - 所以我们有reference 或\S*test\S*
\S 表示除空格之外的所有内容
* 表示 0 次或更多次 - 所以我们有非空白（0 到 n 次），后跟字符序列“测试”，然后是非空白（0 到 n 次）

我们将匹配项替换为 <span> 与跨度内匹配的第一组 ($1)

【讨论】：