javascript - 为什么我的动态 javascript 高亮表单会损坏？

Question

我一直在尝试构建一个简单的 html 表单，通过将其包装在表单 keyup 上的跨度中(使用 jquery)来突出显示页面上的黄色文本。

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

http://codepen.io/liamtarpey/pen/KefCx

这可能是一个非常简单的修复，但我无法弄清楚出了什么问题，有人知道问题是什么吗？

我真的很想使用“body”或“html”选择器而不是“*”，因为它也会影响我的页面头部，但我无法让它与其中任何一个一起使用。

HTML:

<form>
<input type="text" id="searchfor"/>
</form>
<!-- The below is just a test to check the value of the input is being returned -->
<span>Value of form: </span><span id="test"></span>

<div>
  <h3>example text here</h3>
</div>

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

});

Answer 1

展开后删除 highlightspan 元素:

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

这将防止 DOM 上出现重复的 ID，但是最好将 highlightspan 创建为一个类。

示例 http://codepen.io/anon/pen/rIujD