Javascript 根据用户输入显示或隐藏div

我想在我的网站上加入一个搜索功能，这样用户可以在搜索表单中键入一些关键字，并且只显示一些div。我不知道如何比较字符串。 这是我的密码：

<h1 class="title">News Journal</h1>

    <input type="text" class="search" placeholder="Search for a subject...">

    <p class="mostViewed">Most visited news websites...</p>

    <div class="divCNN">
    <a target="_blank" href="https://www.cnn.com/"><img src="https://pmcdeadline2.files.wordpress.com/2016/11/cnn-logo-2.jpg?w=892&h=598&crop=1" class="CNN"></a>
    <p class="description">CNN was founded in 1980 by American media proprietor Ted Turner as a 24-hour cable news channel. It was the first all-news television channel in the United States and CNN website has an average of 112 millions unique monthly visitors.<a target="_blank" href="https://www.cnn.com/"> Visit !</a></p>
    </div>

    <div class="divNYT">
    <a target="_blank" href="https://www.nytimes.com/"><img src="https://pmcvariety.files.wordpress.com/2013/08/t_logo_2048_black.png?w=1000&h=563&crop=1" class="NYT"></a>
    <p class="description">The New York Times is an American newspaper based in New York City with worldwide influence and readership. Founded in 1851, the paper has won 125 Pulitzer Prizes, and its website has 95 millions unique monthly visitors.<a target="_blank" href="https://www.nytimes.com/"> Visit !</a></p>
    </div>

    <div class="divYNews">
    <a target="_blank" href="https://www.yahoo.com/news/"><img src="https://pmcdeadline2.files.wordpress.com/2017/05/yahoo-news-logo.jpg?w=446&h=299&crop=1" class="YNews"></a>
    <p class="description">Yahoo! News is a news website that originated as an internet-based news aggregator by Yahoo!. Articles originally came from news services such as Reuters, Fox News, Al Jazeera, USA Today, CNN, BBC News, etc. 93 millions unique monthly visitors.<a target="_blank" href="https://www.yahoo.com/news/"> Visit !</a></p>
    </div>

    <div class="divWPost">
    <a target="_blank" href="https://www.washingtonpost.com/"><img src="http://neatoday.org/wp-content/uploads/2018/02/washington-post-logo.jpg" class="WPost"></a>
    <p class="description">The Washington Post is a major American daily newspaper founded on December 6, 1877. It has a particular emphasis on national politics and its website has 92 millions unique monthly visitors.<a target="_blank" href="https://www.washingtonpost.com/"> Visit !</a></p>
    </div>

<script type="text/javascript">
    function Search() {

    }
    document.addEventListener("keyup", Search);
</script>

例如，如果输入是CNN，函数将显示该特定div，而不是其他div

---

谢谢你的帮助

您可以尝试比较新闻div中每个a的href，并为它们提供一个容器以便于选择：

常量输入=document.querySelector'.search'； const newsDivs=document.queryselectoral'news-container>div'； input.addEventListenerkeyup，=>{ const str=input.value.toLowerCase.trim； newsDivs.forEachnewsDiv=>{ const href=newsDiv.children[0].href； newsDiv.style.display= href.includesstr？'block'：'none'； }; }; 新闻杂志

访问量最大的新闻网站

CNN于1980年由美国媒体所有者特德·特纳（Ted Turner）创建，是一个24小时有线新闻频道。它是美国第一个全新闻电视频道，CNN网站平均每月有1.12亿独立访客

纽约时报是一家总部设在纽约市的美国报纸，拥有全球影响力和读者群。该报成立于1851年，已获得125项普利策奖，其网站每月有9500万独立访客

雅虎！新闻是一个新闻网站，由Yahoo！作为一个基于互联网的新闻聚合器创建！。文章最初来自新闻服务，如路透社、福克斯新闻、半岛电视台、今日美国、CNN、BBC新闻等。每月有9300万独立访客。

华盛顿邮报是1877年12月6日成立的美国主要日报。它特别强调国家政治，其网站每月有9200万独立访客

---

这是我的代码：：/故意这么做，我只是不知道从哪里开始：/htmlasticsearch restapi中看到不止一个site div可能会有助于获得有意义的回复；刚刚编辑过！