주어진 텍스트의 모든 색상 /과 +기호 를 색칠하고 싶으 므로 이것을 시도했습니다.
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>그러나 보시다시피 제대로 작동하지 않습니다! /각 범위의 기호도 교체되어 문제가 발생한다고 생각합니다 .
이 문제를 어떻게 해결할 수 있습니까?
위의 주석에서 @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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다