Fix: JSON sanitize fuer Fragmente, bessere Anleitungen; Backend index.html Expires-Header
This commit is contained in:
@@ -1902,11 +1902,30 @@ function RegexBuilder({ toast, mobile }) {
|
||||
|
||||
// Typografische Anführungszeichen und andere häufige Probleme beheben
|
||||
function sanitizeJson(raw) {
|
||||
return raw
|
||||
.replace(/[\u201C\u201D\u201E\u201F\u2018\u2019\u02BC]/g, '"') // „" "" usw → "
|
||||
.replace(/[\u2018\u2019\u02BC\u0060]/g, '"') // ' ` → "
|
||||
.replace(/,\s*([}\]])/g, '$1') // trailing commas
|
||||
.replace(/([{,]\s*)([a-zA-Z_][a-zA-Z0-9_]*)\s*:/g, '$1"$2":'); // unquoted keys
|
||||
let s = raw
|
||||
// Alle typografischen/deutschen Anführungszeichen → gerade "
|
||||
.replace(/[\u201C\u201D\u201E\u201F\u00AB\u00BB\u2039\u203A]/g, '"')
|
||||
// Einfache typografische → gerade "
|
||||
.replace(/[\u2018\u2019\u02BC\u0060]/g, '"')
|
||||
// Trailing commas vor } oder ]
|
||||
.replace(/,\s*([}\]])/g, '$1')
|
||||
// Unquoted keys: {key: ...} → {"key": ...}
|
||||
.replace(/([{,]\s*)([a-zA-Z_\u00C0-\u024F][a-zA-Z0-9_\u00C0-\u024F]*)\s*:/g, '$1"$2":');
|
||||
|
||||
const trimmed = s.trim();
|
||||
|
||||
// Falls kein vollständiges JSON-Objekt/Array → versuche als Objekt-Fragment wrappen
|
||||
// z.B. "Mitarbeiter": [...] → {"Mitarbeiter": [...]}
|
||||
if (trimmed && !trimmed.startsWith('{') && !trimmed.startsWith('[')
|
||||
&& !trimmed.startsWith('"') && trimmed !== 'null'
|
||||
&& trimmed !== 'true' && trimmed !== 'false') {
|
||||
s = '{' + trimmed + '}';
|
||||
} else if (trimmed && trimmed.startsWith('"') && trimmed.includes(':')) {
|
||||
// Quoted key at root level: "key": value → {"key": value}
|
||||
s = '{' + trimmed + '}';
|
||||
}
|
||||
|
||||
return s;
|
||||
}
|
||||
|
||||
// JSON → XML string
|
||||
@@ -2183,11 +2202,26 @@ function JsonTool({ toast, mobile }) {
|
||||
{/* Anleitung */}
|
||||
<div style={{padding:'10px 12px',borderRadius:8,background:'rgba(78,205,196,0.06)',
|
||||
border:'1px solid rgba(78,205,196,0.15)',marginBottom:14}}>
|
||||
<div style={{color:'#4ecdc4',fontFamily:'monospace',fontSize:10,fontWeight:700,marginBottom:4}}>SO FUNKTIONIERT ES</div>
|
||||
<div style={{color:'rgba(255,255,255,0.6)',fontSize:12,lineHeight:1.7}}>
|
||||
JSON oder XML einfügen → der Baum unten zeigt die Struktur auf/zuklappbar.<br/>
|
||||
Pfeile ▸ anklicken zum Auf-/Zuklappen. Konvertierung in das andere Format erscheint automatisch.<br/>
|
||||
<span style={{color:'rgba(255,255,255,0.4)',fontSize:11}}>Tipp: Typografische Anführungszeichen „" werden automatisch korrigiert.</span>
|
||||
<div style={{color:'#4ecdc4',fontFamily:'monospace',fontSize:10,fontWeight:700,marginBottom:6}}>SO FUNKTIONIERT ES</div>
|
||||
<div style={{color:'rgba(255,255,255,0.65)',fontSize:12,lineHeight:1.8}}>
|
||||
JSON oder XML einfügen → der Baum zeigt die Struktur auf/zuklappbar. Pfeile ▸ anklicken.<br/>
|
||||
<span style={{color:'rgba(255,255,255,0.4)',fontSize:11}}>
|
||||
Typografische Anführungszeichen „" werden automatisch korrigiert. Unvollständige Fragmente werden soweit möglich automatisch ergänzt.
|
||||
</span>
|
||||
</div>
|
||||
<div style={{marginTop:10,display:'grid',gridTemplateColumns:mobile?'1fr':'1fr 1fr',gap:8}}>
|
||||
{[
|
||||
['Objekt { }','Zusammengehörige Felder eines Eintrags.\nBeispiel: eine Person mit Name und Alter.',
|
||||
'{\n "name": "Max",\n "alter": 30\n}'],
|
||||
['Array [ ]','Eine Liste gleichartiger Einträge.\nBeispiel: mehrere Personen.',
|
||||
'[\n {"name": "Max"},\n {"name": "Lisa"}\n]'],
|
||||
].map(([title,desc,ex])=>(
|
||||
<div key={title} style={{background:'rgba(0,0,0,0.2)',borderRadius:7,padding:'8px 10px'}}>
|
||||
<div style={{color:'#4ecdc4',fontFamily:'monospace',fontSize:11,fontWeight:700,marginBottom:3}}>{title}</div>
|
||||
<div style={{color:'rgba(255,255,255,0.55)',fontSize:11,lineHeight:1.6,marginBottom:6,whiteSpace:'pre-line'}}>{desc}</div>
|
||||
<pre style={{margin:0,color:'rgba(255,255,255,0.7)',fontFamily:"'Courier New',monospace",fontSize:10,lineHeight:1.5}}>{ex}</pre>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2262,13 +2296,28 @@ function JsonTool({ toast, mobile }) {
|
||||
{/* Anleitung */}
|
||||
<div style={{padding:'10px 12px',borderRadius:8,background:'rgba(78,205,196,0.06)',
|
||||
border:'1px solid rgba(78,205,196,0.15)',marginBottom:14}}>
|
||||
<div style={{color:'#4ecdc4',fontFamily:'monospace',fontSize:10,fontWeight:700,marginBottom:4}}>SO FUNKTIONIERT DER BUILDER</div>
|
||||
<div style={{color:'rgba(255,255,255,0.6)',fontSize:12,lineHeight:1.7}}>
|
||||
Klicke „+ Feld hinzufügen" um Felder zum Objekt oder zur Liste hinzuzufügen.<br/>
|
||||
<strong style={{color:'rgba(255,255,255,0.8)'}}>Typen:</strong> <span style={{color:'#a8f0eb'}}>Text</span> = normaler Text · <span style={{color:'#ffe66d'}}>Zahl</span> = Nummer · <span style={{color:'#ff6b9d'}}>Ja/Nein</span> = true/false · <span style={{color:'rgba(255,255,255,0.4)'}}>Leer</span> = null<br/>
|
||||
<span style={{color:'#4ecdc4'}}>Objekt {'{ }'}</span> = verschachtelter Datensatz (z.B. Adresse mit Straße, PLZ) ·
|
||||
<span style={{color:'#ffe66d'}}> Liste [ ]</span> = mehrere gleichartige Einträge (z.B. Mitarbeiterliste)<br/>
|
||||
<span style={{color:'rgba(255,255,255,0.4)',fontSize:11}}>Das fertige JSON/XML erscheint unten und kann kopiert werden.</span>
|
||||
<div style={{color:'#4ecdc4',fontFamily:'monospace',fontSize:10,fontWeight:700,marginBottom:6}}>SO BAUST DU EINE STRUKTUR</div>
|
||||
<div style={{color:'rgba(255,255,255,0.65)',fontSize:12,lineHeight:1.8,marginBottom:10}}>
|
||||
Klicke <strong style={{color:'#4ecdc4'}}>„+ Feld hinzufügen"</strong> und wähle einen Typ. Felder können beliebig tief verschachtelt werden.
|
||||
</div>
|
||||
<div style={{display:'grid',gridTemplateColumns:mobile?'1fr':'1fr 1fr 1fr',gap:8,marginBottom:10}}>
|
||||
{[
|
||||
['Text (string)','#a8f0eb','Normaler Text.\nz.B. Name, Adresse, E-Mail','„Max Mustermann"'],
|
||||
['Zahl (number)','#ffe66d','Eine Zahl.\nz.B. Alter, Preis, Menge','42 oder 3.14'],
|
||||
['Ja/Nein (boolean)','#ff6b9d','Wahrheitswert.\nz.B. aktiv, sichtbar','true oder false'],
|
||||
['Objekt { }','#4ecdc4','Zusammengehörige Felder.\nz.B. eine Person mit Name + Alter','{ name, alter }'],
|
||||
['Liste [ ]','#ffe66d','Mehrere gleichartige Einträge.\nz.B. eine Mitarbeiterliste','[ {...}, {...} ]'],
|
||||
['Leer (null)','rgba(255,255,255,0.4)','Kein Wert vorhanden.\nz.B. optionales Feld','null'],
|
||||
].map(([title,color,desc,ex])=>(
|
||||
<div key={title} style={{background:'rgba(0,0,0,0.2)',borderRadius:7,padding:'7px 9px'}}>
|
||||
<div style={{color,fontFamily:'monospace',fontSize:10,fontWeight:700,marginBottom:2}}>{title}</div>
|
||||
<div style={{color:'rgba(255,255,255,0.5)',fontSize:11,lineHeight:1.5,whiteSpace:'pre-line',marginBottom:3}}>{desc}</div>
|
||||
<code style={{color:'rgba(255,255,255,0.35)',fontSize:10}}>{ex}</code>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div style={{color:'rgba(255,255,255,0.4)',fontSize:11,lineHeight:1.6}}>
|
||||
💡 Beispiel „Mitarbeiterliste": Root-Objekt → Feld „Mitarbeiter" als <span style={{color:'#ffe66d'}}>Liste [ ]</span> → in der Liste Einträge als <span style={{color:'#4ecdc4'}}>Objekt {'{ }'}</span> mit Feldern „vorname" und „nachname" als <span style={{color:'#a8f0eb'}}>Text</span>.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user