为什么我的动态javascript突出显示表单中断？

我一直在尝试构建一个简单的html表单，通过将其包装在表单的键控键上（使用jquery），在页面上突出显示黄色文本

它工作正常，直到我在键盘上退格以完全清除表单的内容，然后它停止工作。我创建了一个快速代码笔来演示我的问题：

这可能是一个非常简单的解决方案，但我无法了解出了什么问题，有人知道问题是什么吗

我真的很想使用“body”或“html”选择器，而不是“*”，因为它也会影响我的页面标题，但我无法让它处理这两个选项

HTML:

形式价值：
此处为示例文本

jQuery：

$("#searchfor").on("keyup change", function() {

  // store value in a variable
  value = this.value;

  // unwrap span from previous search
  $("span[id^='highlightspan']").contents().unwrap();

  // wrap span around inputted text
  $("*").each(function() { 
    if($(this).children().length==0) { 
      $(this).html($(this).html().replace(value, '<span id="highlightspan" style="background:yellow;">' + value + '</span>')); 
    } 
  });

  $("#test").html(value);

$（“#搜索”）。关于（“键控更改”，函数（）{
//将值存储在变量中
value=this.value；
//从上一次搜索展开范围
$（“span[id^='highlightspan']）。contents（）.unwrap（）；
//环绕输入的文本
$（“*”）.each（function（）{
如果（$（this.children（）.length==0）{
$（this.html（$（this.html（）.replace（value，“+value+”））；
} 
});
$（“#测试”）.html（值）；

---

}))

在展开元素后，将其移除：

  $("span[id^='highlightspan']").contents().unwrap();
  $("span[id^='highlightspan']").remove();

这将防止DOM上出现重复ID，但是最好只将

highlightspan

设置为类

示例

if (value === '') {
    $('#highlightspan').remove();
}  

---

您需要删除

highlightspan

，因此再次将其添加到此代码中

$（this.html（$（this.html（）.replace（value），+value+''）
你好，凯文，这只是完全删除了我在页面上搜索的文本，我真的不想这样做…@LiamTarpey请查看更新的代码笔，我发布了错误的链接。@LiamTarpey很高兴我能帮上忙！
if (value === '') {
    $('#highlightspan').remove();
}