JavaScript解析异常：跨行alias属性未被识别的修复咨询

我写了一段JavaScript代码，用来检查HTML中标签的alias属性——如果属性缺失或者格式不符合^[a-zA-Z0-9_]+$的要求，就给出错误提示。代码能正常处理alias和标签在同一行的情况，但当alias属性换行时，会误判为缺失alias，求修复方案。

示例代码 #

document.addEventListener("DOMContentLoaded", function () {
    const checkButton = document.getElementById("checkButton");
    const resultDiv = document.getElementById("result");

    checkButton.addEventListener("click", function () {
        const htmlCode = document.getElementById("htmlInput").value;

        // Split the HTML code into lines for line number tracking
        const lines = htmlCode.split('\n');

        // Regular expression pattern to match <a> tags with alias attributes
        const aTagPattern = /<a[^>]*alias="([^"]*)"/g;

        const aliasMatches = [];

        // Initialize arrays to store errors and warnings along with line numbers
        const invalidAliases = [];
        const missingAliases = [];

        // Loop through each line and check for <a> tags with alias attributes
        lines.forEach((line, lineNumber) => {
            const aTagMatches = [...line.matchAll(aTagPattern)];

            aTagMatches.forEach((match) => {
                const alias = match[1];

                if (!/^[a-zA-Z0-9_]+$/.test(alias)) {
                    invalidAliases.push(`Invalid alias "${alias}" on line ${lineNumber + 1}`);
                }
            });

            if (!line.includes('alias=')) {
                const hrefMatch = line.match(/<a[^>]*href="([^"]+)"/);
                if (hrefMatch) {
                    const href = hrefMatch[1];
                    missingAliases.push(`Missing alias for href="${href}" on line ${lineNumber + 1}`);
                }
            }
        });

        // Generate result messages
        let resultMessage = "";

        if (missingAliases.length > 0) {
            resultMessage += "Missing Aliases:\n" + missingAliases.join('\n') + "\n";
        }

        if (invalidAliases.length > 0) {
            resultMessage += "Invalid Aliases:\n" + invalidAliases.join('\n') + "\n";
        } else if (missingAliases.length === 0) {
            resultMessage = "All aliases are in the correct format.";
        }

        // Display the result message
        if (resultMessage !== "") {
            resultDiv.innerText = resultMessage;
        } else {
            resultDiv.innerText = "HTML code is valid!";
        }
    });
});

问题复现 #

• alias与标签同属一行时输出正常：
  

• alias换行时输出错误：
  

修复方案 #

问题出在按行单独处理的逻辑：当标签跨多行时，包含<a开头的行里没有alias=，代码就直接判定这个标签缺失alias，但实际alias在后面的行里。

要解决这个问题，需要先把整个HTML中的完整标签（包括跨多行的）匹配出来，同时记录每个标签的起始行号，再针对每个完整标签做检查。

document.addEventListener("DOMContentLoaded", function () {
    const checkButton = document.getElementById("checkButton");
    const resultDiv = document.getElementById("result");

    checkButton.addEventListener("click", function () {
        const htmlCode = document.getElementById("htmlInput").value;
        const lines = htmlCode.split('\n');
        const invalidAliases = [];
        const missingAliases = [];

        // 匹配完整的<a>标签（支持跨多行），捕获标签内容和起始位置
        const fullATagPattern = /<a([\s\S]*?)>/g;
        let match;
        while ((match = fullATagPattern.exec(htmlCode)) !== null) {
            const tagContent = match[1];
            // 计算当前<a>标签的起始行号（从1开始）
            const lineCount = htmlCode.substring(0, match.index).split('\n').length;
            
            // 检查标签是否包含href属性
            const hrefMatch = tagContent.match(/href="([^"]+)"/);
            if (!hrefMatch) continue; // 只处理带href的<a>标签
            const href = hrefMatch[1];

            // 检查是否有alias属性
            const aliasMatch = tagContent.match(/alias="([^"]*)"/);
            if (!aliasMatch) {
                missingAliases.push(`Missing alias for href="${href}" on line ${lineCount}`);
                continue;
            }

            const alias = aliasMatch[1];
            // 检查alias格式是否合法
            if (!/^[a-zA-Z0-9_]+$/.test(alias)) {
                invalidAliases.push(`Invalid alias "${alias}" on line ${lineCount}`);
            }
        }

        // 生成结果信息
        let resultMessage = "";
        if (missingAliases.length > 0) {
            resultMessage += "Missing Aliases:\n" + missingAliases.join('\n') + "\n";
        }
        if (invalidAliases.length > 0) {
            resultMessage += "Invalid Aliases:\n" + invalidAliases.join('\n') + "\n";
        } else if (missingAliases.length === 0) {
            resultMessage = "All aliases are in the correct format.";
        }

        resultDiv.innerText = resultMessage || "HTML code is valid!";
    });
});

关键改动说明 #

1. 完整匹配标签：使用/<a([\s\S]*?)>/g正则，[\s\S]*?可以匹配包括换行在内的任意字符，确保捕获跨多行的完整标签。
2. 计算起始行号：通过匹配到的标签起始位置，计算前面有多少个换行符，得到标签所在的起始行号。
3. 针对完整标签检查：对每个完整的标签，统一检查是否有href、alias属性，以及alias格式，避免了按行拆分导致的误判。