示例代码
PHP
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TXT 文件搜索</title> </head> <body> <!-- 输入搜索关键词的输入框 --> <input type="text" id="searchInput" placeholder="输入搜索关键词"> <!-- 触发搜索的按钮 --> <button onclick="searchInTxt()">搜索</button> <!-- 用于显示搜索结果的区域 --> <div id="result"></div> <script src="script.js"></script> </body> </html>
2. JavaScript 部分（script.js）
PHP
function searchInTxt() {// 获取用户输入的搜索关键词const searchTerm = document.getElementById('searchInput').value.trim();if (searchTerm === '') {alert('请输入搜索关键词');return;}// 创建 XMLHttpRequest 对象，用于读取 TXT 文件const xhr = new XMLHttpRequest();// 假设 TXT 文件名为 example.txt，可根据实际情况修改xhr.open('GET', 'example.txt', true);xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status === 200) {// 获取 TXT 文件的内容const txtContent = xhr.responseText;// 调用 searchText 函数进行搜索const results = searchText(txtContent, searchTerm);displayResults(results);} else {// 若请求失败，显示错误信息document.getElementById('result').innerHTML = '无法读取 TXT 文件';}}};// 发送请求xhr.send();
}function searchText(text, term) {const lines = text.split('\n');const results = [];// 遍历每一行，查找包含搜索关键词的行for (let i = 0; i < lines.length; i++) {if (lines[i].includes(term)) {results.push(lines[i]);}}return results;
}function displayResults(results) {const resultDiv = document.getElementById('result');if (results.length === 0) {// 若没有找到匹配结果，显示提示信息resultDiv.innerHTML = '未找到匹配的内容';} else {let html = '<ul>';// 将匹配的结果以列表形式显示results.forEach(result => {html += `<li>${result}</li>`;});html += '</ul>';resultDiv.innerHTML = html;}
}
![[大模型/AI/GPT] Chatbox:大模型可视化终端应用](https://blog-static.cnblogs.com/files/johnnyzen/cnblogs-qq-group-qrcode.gif?t=1679679148)
