正则调试工具-By AI助手

简介

暂无简介

预览图片

匹配网址

• *://*/*

脚本源码

// 创建主容器
const regexTool = document.createElement('div');
regexTool.id = 'regex-tool';
regexTool.innerHTML = `
<div style="font-family: Arial, sans-serif; max-width: 800px; margin: 20px auto; padding: 20px; border: 1px solid #ddd; border-radius: 8px; background: #f9f9f9;">
    <h2 style="color: #333; text-align: center;">正则表达式调试工具</h2>
    
    <div style="margin-bottom: 15px;">
        <label style="display: block; margin-bottom: 5px; font-weight: bold;">正则表达式:</label>
        <input type="text" id="regex-input" placeholder="输入正则表达式，如: /\\w+/g" 
               style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-family: monospace;">
    </div>
    
    <div style="margin-bottom: 15px;">
        <label style="display: block; margin-bottom: 5px; font-weight: bold;">测试文本:</label>
        <textarea id="test-text" placeholder="输入要测试的文本" 
                  style="width: 100%; height: 120px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-family: monospace; resize: vertical;"></textarea>
    </div>
    
    <div style="margin-bottom: 15px;">
        <label style="display: block; margin-bottom: 5px; font-weight: bold;">替换文本:</label>
        <input type="text" id="replace-input" placeholder="输入替换文本（可选）" 
               style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-family: monospace;">
    </div>
    
    <div style="margin-bottom: 15px;">
        <button id="test-btn" style="padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px;">测试匹配</button>
        <button id="replace-btn" style="padding: 8px 16px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;">执行替换</button>
    </div>
    
    <div id="results" style="background: white; padding: 15px; border-radius: 4px; border: 1px solid #ddd; min-height: 100px; font-family: monospace; white-space: pre-wrap;"></div>
    
    <div id="error" style="color: #dc3545; margin-top: 10px; display: none;"></div>
</div>
`;

document.body.appendChild(regexTool);

// 工具函数：解析正则表达式
function parseRegex(input) {
    const match = input.match(/^\/(.*)\/([gimy]*)$/);
    if (!match) {
        throw new Error('正则表达式格式错误，请使用 /pattern/flags 格式');
    }
    
    const pattern = match[1];
    const flags = match[2];
    
    // 处理转义字符
    const processedPattern = pattern.replace(/\\\//g, '/');
    
    return new RegExp(processedPattern, flags);
}

// 高亮匹配文本
function highlightMatches(text, regex) {
    if (!text || !regex) return text;
    
    try {
        const matches = [];
        let match;
        let lastIndex = 0;
        
        // 重置lastIndex以确保从开头开始匹配
        regex = new RegExp(regex.source, regex.flags.includes('g') ? regex.flags : regex.flags + 'g');
        
        while ((match = regex.exec(text)) !== null) {
            matches.push({
                start: match.index,
                end: match.index + match[0].length,
                text: match[0]
            });
            
            // 避免无限循环
            if (match.index === regex.lastIndex) {
                regex.lastIndex++;
            }
        }
        
        if (matches.length === 0) return text;
        
        let result = '';
        let lastEnd = 0;
        
        matches.forEach((match, index) => {
            // 添加匹配前的文本
            result += text.slice(lastEnd, match.start);
            // 添加高亮的匹配文本
            result += `<span style="background-color: #ffeb3b; padding: 2px 0; border-radius: 2px;">${match.text}</span>`;
            lastEnd = match.end;
        });
        
        // 添加最后一段文本
        result += text.slice(lastEnd);
        
        return result;
    } catch (error) {
        throw error;
    }
}

// 显示匹配结果
function showMatches() {
    const regexInput = document.getElementById('regex-input');
    const testText = document.getElementById('test-text');
    const results = document.getElementById('results');
    const errorDiv = document.getElementById('error');
    
    errorDiv.style.display = 'none';
    
    try {
        const regex = parseRegex(regexInput.value);
        const text = testText.value;
        
        if (!text) {
            results.innerHTML = '请输入测试文本';
            return;
        }
        
        const highlightedText = highlightMatches(text, regex);
        
        // 统计匹配信息
        const globalRegex = new RegExp(regex.source, regex.flags.includes('g') ? regex.flags : regex.flags + 'g');
        const matches = [...text.matchAll(globalRegex)];
        
        let resultHTML = `<div style="margin-bottom: 10px; color: #666;">`;
        resultHTML += `匹配结果: ${matches.length} 处匹配<br>`;
        resultHTML += `正则表达式: ${regex.toString()}<br>`;
        resultHTML += `标志: ${regex.flags || '无'}`;
        resultHTML += `</div>`;
        resultHTML += `<div style="border-top: 1px solid #eee; padding-top: 10px;">`;
        resultHTML += `<strong>高亮结果:</strong><br>`;
        resultHTML += highlightedText;
        resultHTML += `</div>`;
        
        if (matches.length > 0) {
            resultHTML += `<div style="border-top: 1px solid #eee; padding-top: 10px; margin-top: 10px;">`;
            resultHTML += `<strong>详细匹配信息:</strong><br>`;
            matches.forEach((match, index) => {
                resultHTML += `匹配 ${index + 1}: "${match[0]}" (位置: ${match.index}-${match.index + match[0].length})<br>`;
                if (match.length > 1) {
                    match.slice(1).forEach((group, groupIndex) => {
                        if (group !== undefined) {
                            resultHTML += `  分组 ${groupIndex + 1}: "${group}"<br>`;
                        }
                    });
                }
            });
            resultHTML += `</div>`;
        }
        
        results.innerHTML = resultHTML;
        
    } catch (error) {
        errorDiv.style.display = 'block';
        errorDiv.textContent = `错误: ${error.message}`;
        results.innerHTML = '';
    }
}

// 执行替换
function performReplace() {
    const regexInput = document.getElementById('regex-input');
    const testText = document.getElementById('test-text');
    const replaceInput = document.getElementById('replace-input');
    const results = document.getElementById('results');
    const errorDiv = document.getElementById('error');
    
    errorDiv.style.display = 'none';
    
    try {
        const regex = parseRegex(regexInput.value);
        const text = testText.value;
        const replacement = replaceInput.value || '';
        
        if (!text) {
            results.innerHTML = '请输入测试文本';
            return;
        }
        
        const replacedText = text.replace(regex, replacement);
        
        let resultHTML = `<div style="margin-bottom: 10px; color: #666;">`;
        resultHTML += `替换前字符数: ${text.length}<br>`;
        resultHTML += `替换后字符数: ${replacedText.length}<br>`;
        resultHTML += `正则表达式: ${regex.toString()}<br>`;
        resultHTML += `替换文本: "${replacement}"`;
        resultHTML += `</div>`;
        resultHTML += `<div style="border-top: 1px solid #eee; padding-top: 10px;">`;
        resultHTML += `<strong>替换结果:</strong><br>`;
        resultHTML += `<div style="background: #f8f9fa; padding: 10px; border-radius: 4px; border: 1px solid #e9ecef;">${replacedText}</div>`;
        resultHTML += `</div>`;
        
        results.innerHTML = resultHTML;
        
    } catch (error) {
        errorDiv.style.display = 'block';
        errorDiv.textContent = `错误: ${error.message}`;
        results.innerHTML = '';
    }
}

// 添加事件监听器
document.getElementById('test-btn').addEventListener('click', showMatches);
document.getElementById('replace-btn').addEventListener('click', performReplace);

// 添加实时预览（可选）
let previewTimeout;
document.getElementById('regex-input').addEventListener('input', function() {
    clearTimeout(previewTimeout);
    previewTimeout = setTimeout(showMatches, 500);
});

document.getElementById('test-text').addEventListener('input', function() {
    clearTimeout(previewTimeout);
    previewTimeout = setTimeout(showMatches, 500);
});

// 添加示例数据
document.getElementById('regex-input').value = '/\\w+/g';
document.getElementById('test-text').value = 'Hello World! This is a test text with 123 numbers.';
document.getElementById('replace-input').value = 'WORD';

// 初始显示结果
setTimeout(showMatches, 100);