當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS根据文本框内容匹配并高亮显示

發布時間：2025/3/11 javascript 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS根据文本框内容匹配并高亮显示小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script type="text/javascript">function SearchCompare() {// 獲取搜索字符串var searchText = document.getElementById("SearchCompare.Text").value;// 根據開始和結束標記來進行循環var begin = 1;var end = 7;for (var i = begin; i < end; i++) {// 拼接Element元素的名稱var itemName = "li" + i;var itemContent = document.getElementById(itemName).innerText;if(itemContent.indexOf(searchText) > -1){// 設置該元素的背景色為紅色document.getElementById(itemName).style.backgroundColor="#f00";}}alert(document.getElementById("SearchCompare.Text").value);}</script></head><body><input type="text" id="SearchCompare.Text" /><input type="button" id="SearchCompare.Button" value="查找" οnclick="SearchCompare()" /><ul>張三<li><a href="#" id="li1">AB</a></li><li><a href="#" id="li2">BC</a></li><li><a href="#" id="li3">CC</a></li><li><a href="#" id="li4">DA</a></li><li><a href="#" id="li5">EA</a></li><li><a href="#" id="li6">FCB</a></li></ul></body></html>

總結

以上是生活随笔為你收集整理的JS根据文本框内容匹配并高亮显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Listener refused the
下一篇： Spring boot项目（问答网站）之