Question

我希望javascript代码在以下两个段落标记中突出显示所有'a'和'i'字母的背景颜色。

我还希望图像标签正确显示。我没有在此测试中链接到图像文件，因此正确显示只是意味着显示默认图像。

在某一时刻，我的代码按预期工作，但是后来我尝试时，它不再工作。唯一的结论是我一定做了些改变，但是我不知道是什么。

谁能告诉我为什么它不起作用？

load()

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

})

Answer 1

我对HTML进行了一些更改：我将文本包装在span元素中。在javascript中，我正在搜索result = [list(value) for value in zip(A,B)]和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;
})

i.a{background:yellow}
i.i{background:orange}

Answer 2

您的代码可以工作，除了您没有为类css和yellow添加orange。

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>

尝试更改特定字母的背景颜色

2 个答案: