嘗試更改特定字母的背景顏色

Question

我希望javascript代碼在以下兩個段落標簽中突出顯示所有'a'和'i'字母的背景顏色。

我也希望圖像標簽能夠正確顯示。 我沒有在此測試中鏈接到圖像文件，因此正確顯示只是意味着顯示默認圖像。

在某一時刻，我的代碼按預期工作，但是后來我嘗試時，它不再工作。 唯一的結論是我一定已經改變了一些東西，但是我不知道是什么。

誰能告訴我為什么它不起作用？

 document.querySelectorAll('p').forEach(function(myFirstItem, index) { container = '' zeroORone = 0 myFirstItem.innerHTML.split('').forEach(function(mySecondItem) { if (mySecondItem == 'a' & zeroORone == 0) { container += '<span class="yellow">' + mySecondItem + '</span>' } else if (mySecondItem == 'i' & zeroORone == 0) { container += '<span class="orange">' + mySecondItem + '</span>' } else if (mySecondItem == '<') { zeroORone = 1 container += mySecondItem } else if (mySecondItem == '>') { zeroORone = 0 container += mySecondItem } else { container += mySecondItem } }) myFirstItem.innerHTML = container }) 

 <p>piece of a puzzle</p> <p>Planet <img src="someImage.png"> Earth</p> 

Answer 1

我對HTML進行了一些更改：我將文本包裝在span元素中。 在javascript中，我正在搜索a和i ，並將它們包裝在<i>元素中。 請看一下：

 let spans = document.querySelectorAll('span') spans.forEach(s=>{ let text = s.innerHTML; text = text.replace(/([ai])/g, (found)=> { return `<i class='${found}'>${found}</i>` }); s.innerHTML = text; }) 

 ia{background:yellow} ii{background:orange} 

 <p><span>piece of a puzzle</span></p> <p><span>Planet</span> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/pin.png"> <span>Earth</span></p> 

Answer 2

您的代碼可以正常工作，只不過您沒有為類yellow和orange添加css 。

 document.querySelectorAll('p').forEach(function(myFirstItem, index) { container = '' zeroORone = 0 myFirstItem.innerHTML.split('').forEach(function(mySecondItem) { if (mySecondItem == 'a' && zeroORone == 0) { container += '<span class="yellow">' + mySecondItem + '</span>' } else if (mySecondItem == 'i' && zeroORone == 0) { container += '<span class="orange">' + mySecondItem + '</span>' } else if (mySecondItem == '<') { zeroORone = 1 container += mySecondItem } else if (mySecondItem == '>') { zeroORone = 0 container += mySecondItem } else { container += mySecondItem } }); myFirstItem.innerHTML = container }); 

 .yellow { background: yellow; } .orange { background: orange; } 

 <p>piece of a puzzle</p> <p>Planet <img src="someImage.png"> Earth</p>