我想要一个搜索栏，用于搜索值并在我的网页中突出显示该特定值。我制作了一个导航栏，其中有ID为“ btn”的搜索按钮和ID为“ InputVal”的文本框。我希望我的文本框值被搜索并在我的网页中突出显示（段落）。
我的HTML代码：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Search</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"
id="inputVal">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="btn">Search</button>
</form>
</div>
</nav>
<p style="font-size: 25px;" class="mt-5">
HMS Royal Oak was one of five British Revenge-class battleships built for the Royal Navy during the First World
War. Launched on 17 November 1914, the ship first saw combat at the Battle of Jutland. On 14 October 1939, she
was torpedoed by the German submarine U-47 while anchored at Scapa Flow in Orkney, Scotland; 835 were killed
that night or died later of their wounds. The loss of the outdated ship—the first of the five Royal Navy
battleships and battlecruisers sunk in the Second World War—did little to affect the numerical superiority
enjoyed by the British navy and its allies, but the sinking had a considerable effect on wartime morale. Günther
Prien, the U-boat commander, became the first German submarine officer to be awarded the Knight's Cross of the
Iron Cross. Demonstrating that the German navy was capable of bringing the war to British home waters, the raid
resulted in rapid changes to dockland security and the construction of the Churchill Barriers around Scapa Flow.
</p>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="search.js"></script>
</body>
</html>
MY JS代码（Jquery）：
$(document).ready(function () {
$('#btn').click( // if someone clicks the button
function () {
let bodyTxt = $("p").text() // Takes the paragraph text
let input = $("#inputVal").val() //Takes the textbox text
if (bodyTxt.includes(input)) { //checking if my paragraph text includes my search text
$(bodyTxt).css("background-color", "yellow"); // error in this line. I want to set css properties for my searched text.
}
else {
alert("not found");
}
}
)
}）;
我的JavaScipt代码出现错误。我想为搜索到的文本设置css属性（background-color：黄色；）。
$("p:contains('" + input + "')").css("background-color", "yellow");
入学
$(bodyTxt).css("background-color", "yellow");