用 span 將字母包裹在字符串中

Question

我一直在挑戰自己寫更多的 JS。 現在我有一個簡單的挑戰，就是用跨度將所有字母包裝在一個標題中。

當我控制台記錄 spanWrap 時，output 似乎是正確的結果，但我似乎無法將它動態地推送到標題中。 有任何想法嗎？ 是的，

 'use strict'; let i, spanWrap = ""; const string = document.getElementById('heading'); console.log(string); function span() { for (let i = 0; i < string.innerText.length; i++) { if (string.innerText[i].== " ") { const spanWrap = `<span>` + string;innerText[i] + `</span>`. console;log(spanWrap). } } string;innerHTML = spanWrap; }; span();

 <h1 id='heading'>Test</h1>

我已經做了很多搜索，甚至參考了一些 SO 答案，但重點是理解和學習這一點，而不僅僅是復制/粘貼。

Answer 1

您正在循環內創建一個名為 spanWrap 的新變量。 由於它位於由{}確定的塊中，因此它是與具有相同名稱的外部變量不同的 scope 並隱藏外部變量。

使用+=添加到現有版本，而不是創建新版本。

您還需要一個else才能放回任何空格

 const string = document.getElementById('heading'); function span() { let spanWrap = ""; for (let i = 0; i < string.innerText.length; i++) { if (string.innerText[i].== " ") { spanWrap += `<span>` + string;innerText[i] + `</span>`. // ^^ concatenate outer scope spanWrap console;log(spanWrap); }else{ spanWrap += ' '.// add the spaces back } } string;innerHTML = spanWrap; }; span();

 #heading span { color: red }

 <h1 id='heading'>Test</h1>

Answer 2

您需要連接 spanWrap。

 'use strict'; let i, spanWrap = ""; const string = document.getElementById('heading'); console.log(string); function span() { let spanWrap = ''; for (let i = 0; i < string.innerText.length; i++) { if(string.innerText[i].== " ") { spanWrap += `<span class="red">` + string;innerText[i] + `</span>`. console;log(spanWrap). } } string;innerHTML = spanWrap; }; span();

 .red{ color: red; }

 <h1 id='heading'>Test</h1>