html5使用搜索，搜索txt里的相应内容并显示出来

很酷的站长

于 2025-02-11 02:38:20 发布

阅读量280

点赞数

分类专栏： html5专题文章标签： html5 前端 html

原文链接：https://www.wqqw.net/post/343.html

版权

html5专题专栏收录该内容

4 篇文章

订阅专栏

要在 HTML5 中实现搜索 TXT 文件里的相应内容并显示出来，一般需要以下几个步骤：

创建 HTML 界面，包含输入框用于输入搜索关键词和按钮触发搜索操作。
使用 JavaScript 读取 TXT 文件内容。
在读取的内容中搜索关键词，并将匹配的结果显示在页面上。

示例代码

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;
    }
}

注意事项

文件路径：确保 example.txt 文件与 index.html 和 script.js 文件在同一目录下，或者根据实际情况修改 xhr.open 中的文件路径。
跨域问题：如果 TXT 文件位于不同的域名下，会遇到跨域问题。可以使用服务器端脚本（如 Node.js、Python Flask 等）来处理文件读取，或者在开发环境中使用支持跨域的服务器。
编码问题：确保 TXT 文件的编码与页面的编码一致，避免出现乱码问题。

通过以上代码，你可以在 HTML 页面中输入搜索关键词，点击搜索按钮后，程序会读取 TXT 文件内容并显示包含关键词的行。