改变给定句子中出现的所有特定符号的颜色

Question

我想给给定文本中的所有/和+符号上色，所以我尝试了这个：

const grammarStructure = document.querySelector(".grammar-structure");
grammarStructure.innerHTML = getColoredStructure("have / has + been + ing");
function getColoredStructure(text) {
let result = text;
result = result.replaceAll('+', "<span class='action'>+</span>");
result = result.replaceAll('/', "<span class='action'>/</span>");
return result;
}

.action {
color: #ff0033;
}

<div class="grammar-structure"></div>

但正如你所看到的，它不能正常工作！我想每个跨度中的/符号也被替换了，这导致了问题。。。

我该怎么解决这个问题？

Answer 1

正如上面评论中提到的@pilchard，您可以使用regExp

const grammarStructure = document.querySelector(".grammar-structure");
grammarStructure.innerHTML = getColoredStructure("have / has + been + ing");
function getColoredStructure(text) {
let result = text;
result = result.replace(/([/])/g, "<span class='action'>$1</span>");
result = result.replace(/([+])/g, "<span class='action-2'>$1</span>");
return result;
}

.action {
color: #ff0033;
}
.action-2 {
color: yellow;
}

<div class="grammar-structure"></div>

Answer 2

正斜杠被视为转义字符。

为了避免单引号、双引号和正斜杠的混乱，您可以使用反勾字符来分隔字符串。这使代码更易于阅读，并省去了创建regex语句的困难。

请看这个片段(然而，+仍然被解释为运算符，所以我作弊并切换了两个replaceAll语句-将进行调查(。

const grammarStructure = document.querySelector(".grammar-structure");
grammarStructure.innerHTML = getColoredStructure("have / has + been + ing");
function getColoredStructure(text) {
let result = text;
result = result.replaceAll(`/`, `<span class='action'>/</span>`);
result = result.replaceAll(`+`,`<span class='action'>+</span>`);
return result;
}

.action {
color: #ff0033;
}

<div class="grammar-structure"></div>