如何用 javascript 实现html页面的关键字搜索？
本文介绍了如何用 javascript 实现html页面的关键字搜索？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<input type="text">
<div data-v-4fced2a0="" class="markdown-body">
<section data-v-4fced2a0=""><h1 id="Hello">Hello</h1>
<h2>hello1</h2>
<h2>hello2</h2>
<p><code><span><span>{{</span>sss<span>}}</span></span></code></p>
<blockquote><p>This is test.</p></blockquote>
<ul>
<li>How are you?</li>
<li>Fine, Thank you, and you?</li>
<li>I'm fine， too. Thank you.</li>
<li>
??????????????????????????????????????????????????????????????????????????????
</li>
</ul>
<h1 id="最新消息">最新消息</h1>
</section>
</div>
<script>
(function () {
var input = document.getElementsByTagName('input')[0]
var origin = document.getElementsByClassName('markdown-body')[0].innerHTML;
input.addEventListener('keyup', function () {
var searchKey = input.value
console.log('keyup', searchKey)
document.getElementsByClassName('markdown-body')[0].innerHTML =
origin.replace(searchKey, '<span class=\'highlight\'>' + searchKey + '</span>')
})
}())
</script>
</body>
</html>
如何搜索markdown-body中的关键字，又不对html结构造成影响呢？类似浏览器的搜索功能
解决方案
document.getElementsByClassName('markdown-body')[0].innerHTML=html.replace(searchKey, '<span class=\'highlight\'>' + searchKey + '</span>')这篇关于如何用 javascript 实现html页面的关键字搜索？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
