处理服务器搜索结果时，按'='分割字符串得到异常数组求排查

用户实现搜索功能时，服务器返回以换行符分隔的「文章id=文章标题」格式字符串，但前端按等号分割时，得到的数组仅包含元素'0'，相关代码如下：

前端JavaScript代码 #

function findArticle(){
    let input = document.getElementById("search")
    let value = input.value
    if(value){
        let request = new XMLHttpRequest()
        request.onreadystatechange = function (){
            if(request.readyState === 4){
                let result = request.response
                if(result !== ''){
                    let searchResults = document.getElementById('search-results')
                    let split = result.split('/\n/')
                    searchResults.innerHTML = ''
                    for (const next in split) {
                        let parts = next.split("/=/")
                        console.log(parts)
                        searchResults.innerHTML += "<a href='"+parts[0]+"'>"+parts[1]+"</a>"
                    }
                }
            }
        }
        request.open("GET","article-search.php?query="+value,true)
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        request.send()
    }
}

后端PHP代码（article-search.php） #

<?php
include_once 'constants.php';
include_once 'functions.php';
$query = $_GET['query'];
$q = "SELECT id,title FROM articles WHERE title LIKE '%$query%'";//;"SELECT id,title FROM defaultdb.articles WHERE MATCH (title) AGAINST ('$query')";
$c = defaultMysqlConnection();
$results = executeQuery($c,$q,true);
if($results){
    foreach ($results as $result){
        echo $result['id']."=".$result['title']."\n";
    }
}
?>

错误原因及修正方案 #

1. 分隔符使用错误 #

• 换行符分割时，result.split('/\n/')错误地把正则写法用在了字符串参数中，实际会把'/n/'作为分隔符匹配，而非换行符。正确写法是result.split('\n')（字符串形式）或result.split(/\n/)（正则形式）。
• 等号分割时，next.split("/=/")同理错误，应改为split('=')。

2. 数组遍历方式错误 #

for (const next in split)遍历的是数组的字符串类型索引（如"0"、"1"），而非数组内的每行数据。分割索引字符串自然得到['0']这类异常结果，应改用for...of遍历数组元素或forEach方法。

3. 多余的请求头设置 #

GET请求无请求体，无需设置Content-type头，可直接删除该代码行。

4. SQL注入风险 #

后端直接将$_GET['query']拼接进SQL语句，存在严重注入风险，需改用预处理语句绑定参数。

修正后的代码 #

修正后的前端代码 #

function findArticle(){
    let input = document.getElementById("search")
    let value = input.value
    if(value){
        let request = new XMLHttpRequest()
        request.onreadystatechange = function (){
            if(request.readyState === 4){
                let result = request.response
                if(result !== ''){
                    let searchResults = document.getElementById('search-results')
                    // 正确分割换行符并过滤空行
                    let lines = result.split('\n').filter(line => line.trim() !== '');
                    searchResults.innerHTML = ''
                    // 遍历数组元素而非索引
                    for (const line of lines) {
                        let parts = line.split('=')
                        // 确保分割结果有效再渲染
                        if(parts.length === 2){
                            searchResults.innerHTML += `<a href="${parts[0]}">${parts[1]}</a>`
                        }
                    }
                }
            }
        }
        // 对查询参数编码避免特殊字符问题
        request.open("GET", `article-search.php?query=${encodeURIComponent(value)}`, true)
        request.send()
    }
}

修正后的后端代码（修复SQL注入） #

<?php
include_once 'constants.php';
include_once 'functions.php';
$query = $_GET['query'] ?? '';
// 使用预处理语句防止SQL注入
$q = "SELECT id,title FROM articles WHERE title LIKE ?";
$c = defaultMysqlConnection();
// 以mysqli预处理为例（可根据现有函数调整）
$stmt = $c->prepare($q);
$likeQuery = "%{$query}%";
$stmt->bind_param("s", $likeQuery);
$stmt->execute();
$result = $stmt->get_result();
$results = $result->fetch_all(MYSQLI_ASSOC);
if($results){
    foreach ($results as $row){
        echo $row['id']."=".$row['title']."\n";
    }
}
$stmt->close();
$c->close();
?>

内容的提问来源于stack exchange，提问作者Alexiy