Javascript JS在复选框if-else后不工作将句子拆分为跨距字母的条件

我将句子分解成

，然后通过这个简单的js及其工作演示将句子分解成

：

这是将单词分解为跨字母的演示文本
.word{边框：1px实心红色；}
.字母{边框：1px实心浅蓝色；}
var textWrapper=document.querySelector（“#text”）；
textWrapper.innerHTML=textWrapper.textContent.replace（/（\S*）/g，m=>{
返回`+
m、 替换（/（-）？\S（-））/g，“$&”）+
``;
});

您的问题在这一行：-

textWrapper.style.display=“block”；

不会撤消由所做的更改

textWrapper.innerHTML=textWrapper.textContent.replace（/（\S*）/g，m=>{
返回`+
m、 替换（/（-）？\S（-））/g，“$&”）+
`

因为

display:block；

不会否定css。请参阅

您应该使用类似的替换来撤消更改

您的问题的可能解决方案是：-

.word{边框：1px实心红色；}
.字母{边框：1px实心浅蓝色；}
复选框：
复选框已选中！
函数myFunction（）{
var checkBox=document.getElementById（“myCheck”）；
var textWrapper=document.querySelector（“#text”）；
如果（checkBox.checked==true）{
textWrapper.innerHTML=textWrapper.textContent.replace（/（\S*）/g，m=>{
返回`+
m、 替换（/（-）？\S（-））/g，“$&”）+
``;
});
}否则{
textWrapper.innerHTML=textWrapper.textContent.replace（/（]+）>）/gi，“”；
}
}

为什么您不能尝试此功能 这不是一个最佳的解决方案，但看起来像是在满足您的需要

    function myFunction() {
  var checkBox = document.getElementById("myCheck");
  var textWrapper = document.querySelector('#text');
  if (checkBox.checked == true){
    textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {
  return `<span class="word">` +
    m.replace(/(-|)?\S(-|@)?/g, "<span class='letter'>$&</span>") +
    `</span>`;
});
  } else {
   var oldText = `<h1 id="text">Checkbox is CHECKED!</h1>`
     textWrapper.innerHTML = ""
     textWrapper.innerHTML = oldText
  }
}

函数myFunction（）{
var checkBox=document.getElementById（“myCheck”）；
var textWrapper=document.querySelector（“#text”）；
如果（checkBox.checked==true）{
textWrapper.innerHTML=textWrapper.textContent.replace（/（\S*）/g，m=>{
返回`+
m、 替换（/（-）？\S（-））/g，“$&”）+
``;
});
}否则{
var oldText=`复选框已选中`
textWrapper.innerHTML=“”
textWrapper.innerHTML=oldText
}
}

将原始文本保留在某个变量上，并根据选中的复选框将文本替换为原始文本

var checkBox=document.getElementById（“myCheck”）；
var textWrapper=document.querySelector（“#text”）；
var orginalText=document.getElementById（“text”）.textContent；
函数myFunction（obj）{
如果（checkBox.checked==true）{
textWrapper.innerHTML=textWrapper.textContent.replace（/（\S*）/g，m=>{
返回`+
m、 替换（/（-）？\S（-））/g，“$&”）+
``;
});
}否则{
document.getElementById（'text'）。innerHTML=orginalText；
}
}

.word{
边框：1px纯红；
}
.信{
边框：1px纯色浅蓝色；
}

复选框：
复选框已选中！