Question

这是我的HTML

<input type="text" />
<div>
  <p>Apple</p>
  <p>Peach</p>
  <p>Bannana</p>
  <p>Tomato</p>
</div>

我的jQuery代码

var items = $("div").find("p").text();

console.log(items);

如何突出div p中与输入中的值匹配的每个字符？让我们说用户写下输入字符＆＃34; a＆＃34;。页面看起来应该是这样的，即使苹果中的一个字符也应该是粗体。

A pple

PE的一 CH

乙一个 NN的一名词一个

汤姆的一个以

这里也是codepen

Answer 1

一个选项是：

// Borrowed from:
// http://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript#answer-3561711
function escapeRegex(str) {
   return str.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
}

var items = $("div").find("p");

$('input').on('keyup', function() {
   var reg = new RegExp('(' + escapeRegex(this.value) + ')', 'gi');
   items.html(function() {
      return this.textContent.replace(reg, "<b>$1</b>");
   });
});

请注意，上面的答案假设（基于发布的标记）p元素只有文本内容。如果p元素包含子元素，则应考虑另一个选项，因为代码段可能有副作用并创建无效标记。

os.listdir()

jQuery如果输入值与div中的字符匹配

1 个答案: