Ctrl+F 기능인 현재창에서 단어검색하는 것을 구현하려고 하는데 잘 안됩니다.

<!-- 본문 내용 검색창 시작 -->

<div class="search-in-body">

<input type="search" class="search-box" placeholder=" 본문 검색">

<button data-search="next" class="next-btn">∨</button>

<button data-search="prev" class="prev-btn">∧</button>

<button data-search="clear" class="clear-btn">Ⅹ</button>

<span class="kwt-count">-</span>

</div>

​

<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>

​

<script>

document.body.onload = function() {

var $input = document.querySelector("input[type='search']"),

$clearBtn = document.querySelector("button[data-search='clear']"),

$prevBtn = document.querySelector("button[data-search='prev']"),

$nextBtn = document.querySelector("button[data-search='next']"),

$content = document.querySelector(".entry-content"),

$contentMark = new Mark($content),

$results,

currentClass = "current",

offsetTop = 200,

currentIndex = 0;

var variableCounter = 0;

var totalCount = 0;

​

$input.addEventListener("input", function() {

var searchVal = this.value;

$contentMark.unmark( {

done: function(totalMatches) {

$contentMark.mark(searchVal, {

separateWordSearch: false,

acrossElements: true,

done: function(totalMatches) {

$results = $content.querySelectorAll("mark");

totalCount = totalMatches;

if (totalCount) {

variableCounter = 1;

$(".kwt-count").html(variableCounter+ " / " +totalCount);

}

}

});

}

});

});

​

$nextBtn.addEventListener("click", prevNextHandler);

$prevBtn.addEventListener("click", prevNextHandler);

$nextBtn.after($prevBtn);

function prevNextHandler() {

if ($results.length) {

currentIndex += (this.dataset.search === "prev" ? -1 : 1);

if (currentIndex < 0) {

currentIndex = $results.length - 1;

}

if (currentIndex > $results.length - 1) {

currentIndex = 0;

}

jumpTo();

}

}

​

$("[data-search=next]").click(function() {

if (variableCounter < totalCount)

variableCounter = variableCounter + 1;

else

variableCounter = 1;

$(".kwt-count").html(variableCounter+ " / " +totalCount);

})

​

$("[data-search=prev]").click(function() {

if (variableCounter > 1)

variableCounter = variableCounter - 1;

else

variableCounter = totalCount;

$(".kwt-count").html(variableCounter+ " / " +totalCount);

})

​

function jumpTo() {

if ($results.length) {

var position,

$current = $results[currentIndex];

$results.forEach($result => $result.classList.remove(currentClass));

if ($current) {

$current.classList.add(currentClass);

position = $current.offsetTop - offsetTop;

window.scrollTo(0, position);

}

}

}

​

$clearBtn.addEventListener("click", function() {

$contentMark.unmark();

$input.value = ""

$input.focus();

variableCounter = 0;

totalCount = 0;

$(".kwt-count").html("-");

});

​

};

​

$(document).ready(function () {

$(".search-in-body").addClass("sib-absolute");

​

$(window).scroll(function () {

if ($(this).scrollTop() > 450) {

$(".search-in-body").addClass("sib-fixed");

$(".search-in-body").removeClass("sib-absolute");

}

else {

$(".search-in-body").addClass("sib-absolute");

$(".search-in-body").removeClass("sib-fixed");

}

});

});

</script>

<!-- 본문 내용 검색창 끝 -->