JQuery, если входное значение соответствует символу в DIV

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

Как я могу выделить каждый символ внутри сНа р, соответствующее значение на входе? Предположим, что пользователи записывают входной символ «a». Страница должна выглядеть так, даже символ в яблоке должен быть смелым.

A pple

Пе ч

В пп п

Том к

здесь 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 имеют дочерние элементы, то другой вариант следует рассматривать как фрагмент кода, который может иметь побочные эффекты и создать недействительный разметка.

https://jsfiddle.net/xbqetxdo/