add
This commit is contained in:
star7th
@@ -0,0 +1,426 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faKey, faCopy, faCheck, faExclamationTriangle, faInfoCircle, faTrash } from '@fortawesome/free-solid-svg-icons';
|
||||
import ToolHeader from '@/components/ToolHeader';
|
||||
import { useLanguage } from '@/context/LanguageContext';
|
||||
|
||||
// 添加CSS变量样式
|
||||
const styles = {
|
||||
card: "card p-4",
|
||||
input: "search-input w-full",
|
||||
secondaryBtn: "btn-secondary",
|
||||
primaryText: "text-primary",
|
||||
secondaryText: "text-secondary",
|
||||
tertiaryText: "text-tertiary",
|
||||
block: "bg-block",
|
||||
codeBlock: "bg-block px-1 rounded",
|
||||
iconButton: "text-tertiary hover:text-purple transition-colors",
|
||||
selectedFlag: "bg-purple-glow/20 text-purple",
|
||||
buttonActive: "px-3 py-1 text-xs rounded-md transition-all bg-gradient-to-r from-[rgb(var(--color-primary))] to-[rgb(var(--color-primary-hover))] text-white shadow-sm shadow-[rgba(var(--color-primary),0.3)]",
|
||||
buttonInactive: "px-3 py-1 text-xs rounded-md transition-all btn-secondary",
|
||||
error: "text-error",
|
||||
highlightBg: "bg-purple-500/30 text-white font-medium",
|
||||
}
|
||||
|
||||
// 定义匹配项类型
|
||||
type MatchResult = RegExpExecArray;
|
||||
type MatchResultArray = MatchResult[];
|
||||
|
||||
export default function RegexTester() {
|
||||
const { t } = useLanguage();
|
||||
|
||||
// 正则表达式输入
|
||||
const [regexString, setRegexString] = useState('');
|
||||
const [flags, setFlags] = useState('g');
|
||||
const [testString, setTestString] = useState('');
|
||||
|
||||
// 测试结果
|
||||
const [matches, setMatches] = useState<MatchResultArray>([]);
|
||||
const [matchCount, setMatchCount] = useState(0);
|
||||
|
||||
// 高级选项
|
||||
const [showGroups, setShowGroups] = useState(true);
|
||||
const [regexError, setRegexError] = useState<string | null>(null);
|
||||
|
||||
// 复制状态
|
||||
const [copiedRegex, setCopiedRegex] = useState(false);
|
||||
|
||||
// 安全处理HTML转义
|
||||
const escapeHtml = (text: string) => {
|
||||
if (text === undefined || text === null) return '';
|
||||
return String(text)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
};
|
||||
|
||||
// 常用正则表达式示例
|
||||
const examples = [
|
||||
{ name: t('tools.regex_tester.examples.email'), pattern: '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}', flags: 'g', testText: '[email protected], invalid-email, [email protected]' },
|
||||
{ name: t('tools.regex_tester.examples.phone'), pattern: '1[3-9]\\d{9}', flags: 'g', testText: t('tools.regex_tester.example_texts.phone') },
|
||||
{ name: t('tools.regex_tester.examples.url'), pattern: 'https?://[-a-zA-Z0-9@:%._\\+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b(?:[-a-zA-Z0-9()@:%_\\+.~#?&//=]*)', flags: 'g', testText: t('tools.regex_tester.example_texts.url') },
|
||||
{ name: t('tools.regex_tester.examples.ip'), pattern: '\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b', flags: 'g', testText: t('tools.regex_tester.example_texts.ip') },
|
||||
{ name: t('tools.regex_tester.examples.chinese'), pattern: '[\\u4e00-\\u9fa5]', flags: 'g', testText: t('tools.regex_tester.example_texts.chinese') },
|
||||
];
|
||||
|
||||
// 当输入改变时更新测试结果
|
||||
useEffect(() => {
|
||||
testRegex();
|
||||
}, [regexString, flags, testString, showGroups]);
|
||||
|
||||
// 测试正则表达式
|
||||
const testRegex = () => {
|
||||
if (!regexString || !testString) {
|
||||
setMatches([]);
|
||||
setMatchCount(0);
|
||||
setRegexError(null);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 验证正则表达式是否有效
|
||||
new RegExp(regexString, flags);
|
||||
setRegexError(null);
|
||||
|
||||
if (flags.includes('g')) {
|
||||
// 获取所有匹配
|
||||
const allMatches: MatchResultArray = [];
|
||||
let match: RegExpExecArray | null;
|
||||
const regexWithGroups = new RegExp(regexString, flags);
|
||||
|
||||
// 收集所有匹配和捕获组
|
||||
while ((match = regexWithGroups.exec(testString)) !== null) {
|
||||
allMatches.push(match);
|
||||
|
||||
// 防止无限循环，如果匹配长度为0，手动增加索引
|
||||
if (match.index === regexWithGroups.lastIndex) {
|
||||
regexWithGroups.lastIndex++;
|
||||
}
|
||||
}
|
||||
|
||||
setMatches(allMatches);
|
||||
setMatchCount(allMatches.length);
|
||||
} else {
|
||||
// 单次匹配模式
|
||||
const regexWithoutG = new RegExp(regexString, flags.replace('g', ''));
|
||||
const execMatch = regexWithoutG.exec(testString);
|
||||
|
||||
if (execMatch) {
|
||||
setMatches([execMatch]);
|
||||
setMatchCount(1);
|
||||
} else {
|
||||
setMatches([]);
|
||||
setMatchCount(0);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(t('tools.regex_tester.regex_error'), error);
|
||||
setRegexError((error as Error).message);
|
||||
setMatches([]);
|
||||
setMatchCount(0);
|
||||
}
|
||||
};
|
||||
|
||||
// 复制正则表达式
|
||||
const copyRegex = () => {
|
||||
const regexText = `/${regexString}/${flags}`;
|
||||
navigator.clipboard.writeText(regexText)
|
||||
.then(() => {
|
||||
setCopiedRegex(true);
|
||||
setTimeout(() => setCopiedRegex(false), 2000);
|
||||
})
|
||||
.catch(err => console.error(t('tools.regex_tester.copy_failed'), err));
|
||||
};
|
||||
|
||||
// 应用示例
|
||||
const applyExample = (example: { pattern: string; flags: string; testText: string }) => {
|
||||
setRegexString(example.pattern);
|
||||
setFlags(example.flags);
|
||||
setTestString(example.testText);
|
||||
};
|
||||
|
||||
// 清空所有内容
|
||||
const clearAll = () => {
|
||||
setRegexString('');
|
||||
setFlags('g');
|
||||
setTestString('');
|
||||
setMatches([]);
|
||||
setMatchCount(0);
|
||||
setRegexError(null);
|
||||
};
|
||||
|
||||
// 切换标志位
|
||||
const toggleFlag = (flag: string) => {
|
||||
if (flags.includes(flag)) {
|
||||
setFlags(flags.replace(flag, ''));
|
||||
} else {
|
||||
setFlags(flags + flag);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col max-w-[1440px] mx-auto p-4 md:p-6">
|
||||
<ToolHeader
|
||||
toolCode="regex_tester"
|
||||
title=""
|
||||
description=""
|
||||
icon={faKey}
|
||||
/>
|
||||
|
||||
{/* 主内容区 */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
||||
{/* 左侧面板 - 正则表达式输入和选项 */}
|
||||
<div className="lg:col-span-1 space-y-6">
|
||||
{/* 常用示例 */}
|
||||
<div className={styles.card}>
|
||||
<h2 className="text-md font-medium text-primary mb-4">{t('tools.regex_tester.examples.title')}</h2>
|
||||
<div className="space-y-2">
|
||||
{examples.map((example, index) => (
|
||||
<button
|
||||
key={index}
|
||||
className="text-left w-full px-3 py-2 rounded-md text-sm text-secondary hover:bg-block-hover transition-colors"
|
||||
onClick={() => applyExample(example)}
|
||||
>
|
||||
{example.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 正则选项 */}
|
||||
<div className={styles.card}>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-md font-medium text-primary">{t('tools.regex_tester.options')}</h2>
|
||||
<button
|
||||
className="text-tertiary hover:text-error transition-colors"
|
||||
onClick={clearAll}
|
||||
>
|
||||
<FontAwesomeIcon icon={faTrash} className="mr-1" />
|
||||
{t('tools.regex_tester.clear')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm text-secondary mb-2">{t('tools.regex_tester.flags')}</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
className={flags.includes('g') ? styles.buttonActive : styles.buttonInactive}
|
||||
onClick={() => toggleFlag('g')}
|
||||
>
|
||||
g ({t('tools.regex_tester.flag_descriptions.global')})
|
||||
</button>
|
||||
<button
|
||||
className={flags.includes('i') ? styles.buttonActive : styles.buttonInactive}
|
||||
onClick={() => toggleFlag('i')}
|
||||
>
|
||||
i ({t('tools.regex_tester.flag_descriptions.case_insensitive')})
|
||||
</button>
|
||||
<button
|
||||
className={flags.includes('m') ? styles.buttonActive : styles.buttonInactive}
|
||||
onClick={() => toggleFlag('m')}
|
||||
>
|
||||
m ({t('tools.regex_tester.flag_descriptions.multiline')})
|
||||
</button>
|
||||
<button
|
||||
className={flags.includes('s') ? styles.buttonActive : styles.buttonInactive}
|
||||
onClick={() => toggleFlag('s')}
|
||||
>
|
||||
s ({t('tools.regex_tester.flag_descriptions.dotall')})
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="flex items-center text-sm text-secondary">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={showGroups}
|
||||
onChange={() => setShowGroups(!showGroups)}
|
||||
className="mr-2"
|
||||
/>
|
||||
{t('tools.regex_tester.show_capture_groups')}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧面板 - 测试区域 */}
|
||||
<div className="lg:col-span-3 space-y-6">
|
||||
{/* 正则表达式输入 */}
|
||||
<div className={styles.card}>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-md font-medium text-primary">{t('tools.regex_tester.regex_expression')}</h2>
|
||||
<button
|
||||
className={styles.iconButton}
|
||||
onClick={copyRegex}
|
||||
disabled={!regexString}
|
||||
>
|
||||
<FontAwesomeIcon icon={copiedRegex ? faCheck : faCopy} className="mr-1" />
|
||||
{copiedRegex ? t('common.copySuccess') : t('tools.regex_tester.copy')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="absolute left-3 top-[13px] text-tertiary">/</div>
|
||||
<input
|
||||
type="text"
|
||||
value={regexString}
|
||||
onChange={(e) => setRegexString(e.target.value)}
|
||||
placeholder={t('tools.regex_tester.enter_regex')}
|
||||
className="search-input pl-7 pr-14"
|
||||
/>
|
||||
<div className="absolute right-14 top-[13px] text-tertiary">/</div>
|
||||
<input
|
||||
type="text"
|
||||
value={flags}
|
||||
onChange={(e) => setFlags(e.target.value)}
|
||||
placeholder="flags"
|
||||
className="absolute right-3 top-[13px] w-8 bg-transparent border-none outline-none text-tertiary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{regexError && (
|
||||
<div className="mt-2 text-sm text-error flex items-center gap-2">
|
||||
<FontAwesomeIcon icon={faExclamationTriangle} />
|
||||
<span>{regexError}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 测试输入 */}
|
||||
<div className={styles.card}>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-md font-medium text-primary">{t('tools.regex_tester.test_text')}</h2>
|
||||
<div className="text-sm text-secondary">
|
||||
{t('tools.regex_tester.character_count')}: <span className="text-purple">{testString.length}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
value={testString}
|
||||
onChange={(e) => setTestString(e.target.value)}
|
||||
placeholder={t('tools.regex_tester.enter_test_text')}
|
||||
className="search-input min-h-[150px] w-full resize-y"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 匹配结果 */}
|
||||
<div className={styles.card}>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-md font-medium text-primary">{t('tools.regex_tester.match_results')}</h2>
|
||||
<div className="text-sm text-secondary">
|
||||
{t('tools.regex_tester.match_count')}: <span className="text-purple">{matchCount}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{testString && (
|
||||
<div className="space-y-4">
|
||||
{/* 高亮显示的匹配文本 */}
|
||||
<div className="bg-block-strong rounded-md p-4 whitespace-pre-wrap font-mono text-sm">
|
||||
{testString && (
|
||||
<div className="match-results">
|
||||
{matchCount > 0 ? (
|
||||
<>
|
||||
<div className="mb-3 text-tertiary text-xs flex items-center justify-between">
|
||||
<span>
|
||||
{t('tools.regex_tester.found')} <span className="text-purple font-medium">{matchCount}</span> {t('tools.regex_tester.matches')}
|
||||
</span>
|
||||
<span className="text-tertiary text-xs">
|
||||
{t('tools.regex_tester.original_text_length')}: {testString.length} {t('tools.regex_tester.result_characters')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{(() => {
|
||||
// 创建包含高亮的全文显示
|
||||
let result = '';
|
||||
let lastIndex = 0;
|
||||
|
||||
// 按索引顺序排序匹配项
|
||||
const sortedMatches = [...matches].sort((a, b) => a.index - b.index);
|
||||
|
||||
// 遍历每个匹配项
|
||||
sortedMatches.forEach(match => {
|
||||
// 添加匹配前的文本
|
||||
result += escapeHtml(testString.substring(lastIndex, match.index));
|
||||
|
||||
// 添加高亮的匹配内容
|
||||
result += `<span style="background-color:rgba(139, 92, 246, 0.5); color:white; font-weight:bold; padding:0 4px; border-radius:3px;">${escapeHtml(match[0])}</span>`;
|
||||
|
||||
// 更新lastIndex
|
||||
lastIndex = match.index + match[0].length;
|
||||
});
|
||||
|
||||
// 添加最后一个匹配后的文本
|
||||
if (lastIndex < testString.length) {
|
||||
result += escapeHtml(testString.substring(lastIndex));
|
||||
}
|
||||
|
||||
return <div dangerouslySetInnerHTML={{ __html: result }} />;
|
||||
})()}
|
||||
</>
|
||||
) : (
|
||||
<span className="text-tertiary">{t('tools.regex_tester.no_matches')}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{!testString && (
|
||||
<span className="text-tertiary">{t('tools.regex_tester.no_matches')}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 捕获组详情 */}
|
||||
{showGroups && matchCount > 0 && (
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-primary mb-2">{t('tools.regex_tester.capture_groups')}</h3>
|
||||
<div className="space-y-2">
|
||||
{Array.isArray(matches) && matches.map((match, index) => (
|
||||
<div key={index} className="bg-block-strong rounded-md p-3">
|
||||
<div className="text-xs text-tertiary mb-2">
|
||||
{t('tools.regex_tester.match')} #{index + 1} ({t('tools.regex_tester.position')}: {match.index})
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
{match.length > 0 && (
|
||||
<div className="flex items-start gap-2">
|
||||
<span className="text-xs text-tertiary min-w-[40px]">{t('tools.regex_tester.full')}:</span>
|
||||
<code className="text-sm text-primary bg-purple-glow/10 px-1 rounded break-all">
|
||||
{escapeHtml(match[0] || '')}
|
||||
</code>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{match.length > 1 && Array.from({ length: match.length - 1 }, (_, i) => i + 1).map(group => (
|
||||
<div key={group} className="flex items-start gap-2">
|
||||
<span className="text-xs text-tertiary min-w-[40px]">{t('tools.regex_tester.group')} {group}:</span>
|
||||
<code className="text-sm text-primary bg-purple-glow/10 px-1 rounded break-all">
|
||||
{match[group] ? escapeHtml(match[group]) : t('tools.regex_tester.empty')}
|
||||
</code>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!testString && (
|
||||
<div className="flex items-center justify-center p-4 text-tertiary">
|
||||
<FontAwesomeIcon icon={faInfoCircle} className="mr-2" />
|
||||
{t('tools.regex_tester.enter_text_prompt')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user