更改模板文字內文本的顏色

Question

這是代碼和結果：

 let upperGuideText = document.getElementById("upperGuideText"); function printGuide(guide){ upperGuideText.innerHTML = `${guide}`; }; printGuide('I was ... to earth.'); //printGuide('I was sent to earth.');

 <div class = "upperGuideContainer"> <p id="upperGuideText" class="upperGuide"></p> </div>

如果我們想改變...的顏色而傳遞給函數的其余文本的顏色保持不變怎么辦？！

想要的結果是這樣的：

並使用printGuide('I was sent to earth.'); 我們應該得到：

Answer 1

您可以拆分要突出顯示的文本，然后在將其包裹在<span>標簽中后加入相同的文本。

 let upperGuideText = document.getElementById("upperGuideText"); function printGuide(guide, coloredText){ guide = guide.split(coloredText).join("<span style='color:orange;'>" + coloredText + "</span>"); upperGuideText.innerHTML = `${guide}`; }; printGuide('I was ... to earth.', '...');

 <div class = "upperGuideContainer"> <p id="upperGuideText" class="upperGuide"></p> </div>

Answer 2

如果你總是想更換...有色...那么你可能在你的功能是這樣的：

function printGuide(guide){
   guide = guide.replace(/\.\.\./gi, '<span style="color: orange;">...</span>');
   upperGuideText.innerHTML = `${guide}`;
};

有了這個，每次你發送一個帶有...的字符串時，它都會用彩色的...替換它...