JavaScript字符串分割与数组遍历：避免常见陷阱

let split=result.split('/
/') // 错误用法
let parts=next.split("/=/")   // 错误用法

let split = result.split("
"); // 正确：按换行符分割
// ...
let parts = next.split("=");    // 正确：按等号分割

let split = result.split(/s+/); // 示例：按一个或多个空白字符分割

for (const next in split) { // 错误用法
    let parts=next.split("/=/")
    console.log(parts)
    // ...
}

for (const item of split) { // 正确：遍历数组元素
    // ...
}

function findArticle() {
    let input = document.getElementById("search");
    let value = input.value.trim(); // 建议去除输入框首尾空白

    if (value) {
        let request = new XMLHttpRequest();
        request.onreadystatechange = function () {
            if (request.readyState === 4 && request.status === 200) { // 增加状态码检查
                let result = request.response;
                if (result !== '') {
                    let searchResults = document.getElementById('search-results');
                    searchResults.innerHTML = ''; // 清空之前结果

                    // 1. 使用正确的字符串分隔符 "
"
                    const articles = result.split("
");

                    // 2. 使用 for...of 遍历数组元素
                    for (const articleString of articles) {
                        // 过滤空字符串，避免处理因末尾换行符产生的空元素
                        if (articleString.trim() === '') {
                            continue;
                        }

                        // 3. 使用正确的字符串分隔符 "="
                        const parts = articleString.split("=");

                        // 增加健壮性检查，确保分割后有两部分
                        if (parts.length === 2) {
                            const articleId = parts[0].trim();
                            const articleTitle = parts[1].trim();

                            // 注意：直接使用 innerHTML 拼接用户输入存在 XSS 风险，
                            // 实际项目中应进行适当的HTML转义或使用 DOM API 创建元素。
                            searchResults.innerHTML += `<a href="${articleId}">${articleTitle}</a>`;
                        } else {
                            console.warn("Invalid article string format:", articleString);
                        }
                    }
                } else {
                    console.log("No search results found.");
                }
            } else if (request.readyState === 4 && request.status !== 200) {
                console.error("Error fetching search results:", request.status, request.statusText);
            }
        };

        request.open("GET", "article-search.php?query=" + encodeURIComponent(value), true); // 对查询参数进行编码
        // request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // GET请求通常不需要设置此头部
        request.send();
    } else {
        document.getElementById('search-results').innerHTML = ''; // 清空结果
    }
}

<?php
include_once 'constants.php';
include_once 'functions.php';

$query = $_GET['query'] ?? ''; // 使用 ?? 运算符提供默认值，避免未设置时的警告

if (!empty($query)) {
    // 建议使用预处理语句防止 SQL 注入
    $q = "SELECT id, title FROM articles WHERE title LIKE ?";
    $c = defaultMysqlConnection(); // 假设此函数返回一个 PDO 或 mysqli 连接

    // 使用预处理语句
    $stmt = $c->prepare($q);
    $searchTerm = '%' . $query . '%';
    $stmt->bind_param("s", $searchTerm); // 假设使用 mysqli
    $stmt->execute();
    $results = $stmt->get_result(); // 获取结果集

    if ($results->num_rows > 0) {
        while ($row = $results->fetch_assoc()) {
            echo $row['id'] . "=" . $row['title'] . "
";
        }
    }
    $stmt->close();
}
// 确保没有额外的输出，避免影响前端解析
?>