JavaScript代码失效求助：段落特定字母高亮及图片显示问题

先帮你理清楚问题：你本来想用这段JS给<p>标签里的字母a和i加背景高亮，同时保证<img>能正常显示，但修改后代码突然罢工了对吧？我看了你的代码，找到了几个关键问题：

你的HTML结构 #

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

失效的JavaScript代码 #

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 
})

核心失效原因：逻辑运算符用错了！ #

这是最直接的问题——你代码里的条件判断用了单个&，但这里需要的是逻辑与运算符&&。单个&是位运算符，它会把两边的值转成二进制做位运算，比如'a' & 0的结果是0，这就导致原本应该匹配a和i的条件永远不成立，自然不会生成高亮的<span>标签。十有八九是你修改代码时不小心把&&改成了&，这才是代码罢工的罪魁祸首。

另外两个潜在问题（虽然这次可能不是直接原因，但也得注意） #

• 变量没声明，容易出全局污染
  container和zeroORone这两个变量没加let/const声明，会变成全局变量。如果页面其他地方有同名变量，很容易互相干扰导致代码出问题，建议加上声明。
• 拆分HTML字符串的方式太脆弱
  你通过拆分innerHTML的字符来识别HTML标签的<和>，这种方式很容易翻车——比如标签里多打个空格（比如<img src="...">）、或者属性值里出现</>（虽然不符合规范，但难保不会遇到），都会导致zeroORone的状态切换出错，破坏<img>的结构。如果后续要优化，建议改成遍历文本节点的方式，比拆分字符串靠谱多了。

修复后的代码示例 #

把逻辑运算符改对，加上变量声明，代码就能恢复正常：

document.querySelectorAll('p').forEach(function(myFirstItem) { 
    let container = ''; 
    let 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; 
});

别忘了加上对应的CSS样式，不然看不到高亮效果：

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

内容的提问来源于stack exchange，提问作者Steve