[JavaScript] サイト内検索を実装する1

まず、index.htmlとresult.html、そして検索対象となるtest1.php、test2.phpを作ります。

index.html

	<form action="result.html">
		<input id="search-input" placeholder="1つキーワードを入力" name="search-key">
		<input id="search-buttom" class="fas" type="submit" value="検索">
	</form>

result.html

	<div class="contents">
		<h1>検索結果</h1>
		<ul id="ul">
		</ul>
	</div>
	<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
    <script>
    	
		let v = new URLSearchParams(window.location.search);
		v = v.get('search-key');

		
		const urlLists = [
			"test1.php",
			"test2.php"
		];
		
		$.each(urlLists, function(i){
			$.ajax({
				url : urlLists[i],
				dataType: 'html',
				success: function(data){
					if( $(data).find("p").text().indexOf(v) !== -1){
						$('<li><a href="' + urlLists[i] +'">' +$(data).find("h1").text() +'</a><br>'+ $(data).find("p").text() + '</li>').appendTo('ul');

					}
				},
				error: function(data){
					console.log("error");
				}
			});
		});
    </script>

仕組みはわかったけど。。検索文字の前後20文字とかで、検索文字を太字で表示したい。