假設我有一個包含以下內容的 HTML 檔案body：
<article>My text in an element</article>
我面臨著用 javascriptin對<article>標簽內的單詞進行樣式設定的挑戰，我需要通過index[8] 來完成。到目前為止我只能想到從這個開始：
<script>
const article = document.querySelector('article').innerText
console.log(article[8]);
</script>
安慰：
>>>> "i"
雖然我以前從未嘗試過這樣的事情，但我對以下步驟有點迷茫。
我希望突出顯示的文本樣式為紅色，背景為黃色。
實作這種造型的好方法是什么？
uj5u.com熱心網友回復：
const HIGHLIGHT_IDX = 8;
const article = document.querySelector('article').innerText;
const words = article.split(' ');
let highlightCheck = words[0].length;
let wordToHighlight = words[0].length >= HIGHLIGHT_IDX && '0';
let wordIdx = 1;
while (!wordToHighlight) {
highlightCheck = 1 words[wordIdx].length;
if (highlightCheck >= HIGHLIGHT_IDX) {
wordToHighlight = wordIdx;
} else {
wordIdx = 1;
}
}
words[wordToHighlight] =
`<span >${words[wordToHighlight]}</span>`;
document.querySelector('article').innerText = words.join(' ');
uj5u.com熱心網友回復：
//get text of article
const article = document.querySelector('article').innerText;
//find index of word 'in'
const index = article.indexOf('in');
//opening and closing tags
const openingTag = '<span style="color:red">'
const closingTag = '</span>'
//insert tags into article
const newHTML
= article.slice(0, index)
openingTag 'in' closingTag
article.slice(index 2);
document.querySelector('article').innerHTML = newHTML;
此代碼通過將文本顏色設定為紅色來設定第一次出現的單詞“in”的樣式。如果您想做其他事情，請更改style開始標記的屬性。
article.slice(0, index)回傳單詞“in”之前的所有內容。在您的示例中，這將評估為'My text '. article.slice(index 2)回傳單詞“in”之后的所有內容，因為“in”的長度為 2 個字母。在您的示例中，這將評估為' an element'. 當所有字串連接在一起時，結果是'My text <span style="color:red">in</span> an element'。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/359063.html
標籤：javascript html
上一篇：滑動擴展影片旁邊的專案