выделенный текст highlight
Прошу помочь разобраться в с функционалом выделения текста функцией highlight. Суть в следующем.. Поиск и выделение текста в блоках функционирует нормально за исключением одного момента. Когда в input'е удаляю полностью текст, то остается выделения текста последнего затертого символа. Как это исправить, товарищи?) Помогите, пожалуйста. Код приведен.
$(document).ready(function () {
$('.middle_content_blog_content_blocks_search_edit').keyup(function(){
let value = $(this).val().toLowerCase();
let count = $('.middle_content_blog_content_blocks_content_block').not('.middle_content_blog_content_blocks_content_block_none').length;
$('.middle_content_blog_content_blocks_content_block').each(function() {
if($(this).text().toLowerCase().indexOf(value) === -1) {
$(this).addClass('middle_content_blog_content_blocks_content_block_none');
return;
} else {
$(this).removeClass('middle_content_blog_content_blocks_content_block_none');
}
});
//console.log(count);
$.fn.highlight = function (b, k) {
function l() {
$("." + c.className).each(function (c, e) {
var a = e.previousSibling,
d = e.nextSibling,
b = $(e),
f = "";
a && 3 == a.nodeType && (f += a.data, a.parentNode.removeChild(a));
e.firstChild && (f += e.firstChild.data);
d && 3 == d.nodeType && (f += d.data, d.parentNode.removeChild(d));
b.replaceWith(f)
})
}
function h(b) {
b = b.childNodes;
for (var e = b.length, a; a = b[--e];)
if (3 == a.nodeType) {
if (!/^\s+$/.test(a.data)) {
var d = a.data,
d = d.replace(m, '<span class="' + c.className + '">$1</span>');
$(a).replaceWith(d)
}
} else 1 == a.nodeType && a.childNodes && (!/(script|style)/i.test(a.tagName) && a.className != c.className) && h(a)
}
var c = {
split: "\\s+",
className: "highlight",
caseSensitive: !1,
strictly: !1,
remove: !0
}, c = $.extend(c, k);
c.remove && l();
b = $.trim(b);
var g = c.strictly ? "" : "\\S*",
m = RegExp("(" + g + b.replace(RegExp(c.split, "g"), g + "|" + g) + g + ")", (c.caseSensitive ? "" : "i") + "g");
return this.each(function () {
b && h(this)
})
};
var settings = {};
var pattern = $('.middle_content_blog_content_blocks_search_edit').val();
pattern && $(".middle_content_blog_content_blocks_content_block").highlight(pattern, settings);
});
});.middle_content_blog {
display: flex;
justify-content: center;
width: 100%;
max-width: 100%;
}
.middle_content_blog_content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 1300px;
max-width: 1300px;
height: auto;
padding: 50px 0 100px 0;
}
.middle_content_blog_content_text {
align-items: start;
width: 100%;
font-family: RobotoCondensed;
font-style: normal;
font-weight: normal;
font-size: 48px;
line-height: 56px;
color: #000000;
}
.middle_content_blog_content_blocks {
display: flex;
justify-content: space-between;
width: 100%;
height: auto;
margin: 50px 0 0 0;
}
.middle_content_blog_content_blocks_content {
display: grid;
grid-template-rows: repeat(1, 1fr);
grid-row-gap: 50px;
}
.middle_content_blog_content_blocks_content_block {
display: flex;
flex-direction: row;
align-items: start;
}
.middle_content_blog_content_blocks_content_block_info {
display: flex;
flex-direction: column;
width: 450px;
padding: 0 0 0 50px;
}
.middle_content_blog_content_blocks_content_block_info_date {
font-family: RobotoCondensed;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 16px;
color: #878787;
}
.middle_content_blog_content_blocks_content_block_info_name {
font-family: RobotoCondensed;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 28px;
color: #B72A20;
margin: 10px 0 0 0;
}
.middle_content_blog_content_blocks_content_block_info_metatags {
display: flex;
flex-direction: row;
margin: 10px 0 0 0;
}
.middle_content_blog_content_blocks_content_block_info_metatags_metatag {
width: auto;
height: auto;
background-color: #878787;
padding: 5px 10px 5px 10px;
margin: 0 10px 0 0;
}
.middle_content_blog_content_blocks_content_block_info_metatags_metatag_text {
font-family: RobotoCondensed;
font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 14px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: #FFFFFF;
}
.middle_content_blog_content_blocks_content_block_info_description {
font-family: RobotoCondensed;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 19px;
color: #000000;
margin: 20px 0 0 0;
}
.middle_content_blog_content_blocks_content_block_info_next {
width: fit-content;
font-family: RobotoCondensed;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 16px;
color: #B72A20;
margin: 30px 0 0 0;
}
.middle_content_blog_content_blocks_search {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 400px;
height: 150px;
border: 1px solid #878787;
box-sizing: border-box;
border-radius: 30px;
padding: 25px 25px 25px 25px;
}
.middle_content_blog_content_blocks_search_text {
font-family: RobotoCondensed;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 28px;
color: #000000;
}
.middle_content_blog_content_blocks_search_edit {
background: url("/img/icons/ico-search.png");
background-repeat: no-repeat;
background-position: 95% center;
width: 100%;
height: 50px;
font-size: 16px;
border: 1px solid #878787;
box-sizing: border-box;
border-radius: 30px;
outline: none;
padding: 0 45px 0 20px;
}
span.highlight {
color: #B72A20;
background-color: #ffff00;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="middle_content_blog">
<div class="middle_content_blog_content">
<span class="middle_content_blog_content_text">
Блог
</span>
<div class="middle_content_blog_content_blocks">
<div class="middle_content_blog_content_blocks_content">
<div class="middle_content_blog_content_blocks_content_block">
<img src="https://bipbap.ru/wp-content/uploads/2019/05/1532440298_3.jpg" alt="">
<div class="middle_content_blog_content_blocks_content_block_info">
<span class="middle_content_blog_content_blocks_content_block_info_date">
1111111
</span>
<span class="middle_content_blog_content_blocks_content_block_info_name">
111
</span>
<div class="middle_content_blog_content_blocks_content_block_info_metatags">
<div
class="middle_content_blog_content_blocks_content_block_info_metatags_metatag">
<span
class="middle_content_blog_content_blocks_content_block_info_metatags_metatag_text">
11
</span>
</div>
<div
class="middle_content_blog_content_blocks_content_block_info_metatags_metatag">
<span
class="middle_content_blog_content_blocks_content_block_info_metatags_metatag_text">
22
</span>
</div>
</div>
<span class="middle_content_blog_content_blocks_content_block_info_description">
000
детали.
</span>
<a class="middle_content_blog_content_blocks_content_block_info_next" href="#">
Читать далее...
</a>
</div>
</div>
<div class="middle_content_blog_content_blocks_content_block">
<img src="https://bipbap.ru/wp-content/uploads/2019/05/1532440298_3.jpg" alt="">
<div class="middle_content_blog_content_blocks_content_block_info">
<span class="middle_content_blog_content_blocks_content_block_info_date">
1111222222
</span>
<span class="middle_content_blog_content_blocks_content_block_info_name">
223232323232323
</span>
<div class="middle_content_blog_content_blocks_content_block_info_metatags">
<div
class="middle_content_blog_content_blocks_content_block_info_metatags_metatag">
<span
class="middle_content_blog_content_blocks_content_block_info_metatags_metatag_text">
11
</span>
</div>
<div
class="middle_content_blog_content_blocks_content_block_info_metatags_metatag">
<span
class="middle_content_blog_content_blocks_content_block_info_metatags_metatag_text">
33
</span>
</div>
</div>
<span class="middle_content_blog_content_blocks_content_block_info_description">
222
</span>
<a class="middle_content_blog_content_blocks_content_block_info_next" href="#">
Читать далее...
</a>
</div>
</div>
<div class="middle_content_blog_content_blocks_content_block">
<img src="https://bipbap.ru/wp-content/uploads/2019/05/1532440298_3.jpg" alt="">
<div class="middle_content_blog_content_blocks_content_block_info">
<span class="middle_content_blog_content_blocks_content_block_info_date">
555
</span>
<span class="middle_content_blog_content_blocks_content_block_info_name">
444
</span>
<div class="middle_content_blog_content_blocks_content_block_info_metatags">
<div
class="middle_content_blog_content_blocks_content_block_info_metatags_metatag">
<span
class="middle_content_blog_content_blocks_content_block_info_metatags_metatag_text">
77
</span>
</div>
<div
class="middle_content_blog_content_blocks_content_block_info_metatags_metatag">
<span
class="middle_content_blog_content_blocks_content_block_info_metatags_metatag_text">
55
</span>
</div>
</div>
<span class="middle_content_blog_content_blocks_content_block_info_description">
99
</span>
<a class="middle_content_blog_content_blocks_content_block_info_next" href="#">
Читать далее...
</a>
</div>
</div>
</div>
<div class="middle_content_blog_content_blocks_search">
<div class="middle_content_blog_content_blocks_search_text">
Поиск по блогу
</div>
<input type="text" class="middle_content_blog_content_blocks_search_edit">
</div>
</div>
</div>
</div>