• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[JavaScript] HTMLView - Ein JavaScript zum ausgeben von (generiertem) HTML

miniA4kuser

miniA4kuser

Lounge-Member
Es geht um ein JavaScript, welches ich HTMLView benannt habe und mir bei folgendem Problem helfen soll:

Man generiert HTML Code via JavaScript und fügt diesen in das DOM ein.
Dabei habe ich festgestellt das je nach Situation der so erstellte HTML Code nicht korrekt validiert werdenkann, weil die HTML Ansicht im Browser nicht aktualisiert wurde oder der verwendete HTML Validator diesen nicht findet.
Nun Kann man sich den generierten HTML Code über ein alert ausgeben lassen und mit Copy & Paste arbeiten was aber auch nicht so komfortabel ist.

Inspiriert von diesem Beispiel habe ich mal angefangen etwas zu schreiben und so ist eben HTMLView entstanden. Dieses empfängt Daten von einem JavaScript (generiert) oder man übergibt einfach eine Elementreferenz von dem HTML tag von dem man den HTML Code dargestellt bekommen möchte.
In der momentanen globalen Variable functionHTML ist ein generierter HTML Code gespeichert, welcher von einem Kalenderscript ausgegeben wird. Dieser Kalender HTML Code ist auch im HTML Dokument vorhanden und wird auch entsprechend vom Browser angezeigt.
Der HTML Code wird for der Ausgabe formatiert (lower case characters) und eingerückt um ordentlich lesbar zu sein.
Die Projektseite ist hier zu finden: HTMLView Projektseite

Hier die Hauptfunktion um die es geht
Code: 
function showGeneratedHTML(output) {
	var element = document.getElementById("source"),
		arrLevel = [],
		arrProcess = [],
		arrTemp,
		arrTempPrevious = false,
		arrTempSingle = false,
		search = /(<.+?>)/g,
		level = -1,
		pos = 0,
		string,
		strPre,
		strPost,
		i_end,
		i;
	output = output.replace(/\r\n|\n|\r/g, '\n');
	output = output.replace(/(<.+?>)/g, function (m) {
		var space = /\s/,
			htmlComment = /<!--/;
		if (space.test(m)) {
			m = m.replace(/(<.+?\s)/g, function (m) {
				return m.toLowerCase();
			});
		} else {
			m = m.toLowerCase();
		}
		return m;
	});
	if (output.indexOf('<body>') !== -1) {
		strPre = output.slice(0, output.indexOf('<body>'));
		strPre = strPre.slice(0, strPre.lastIndexOf('>') + 1) + '\n';
		output = output.slice(output.indexOf('<body>'));
	}
	output = output.replace(/(>)\s+?(<)/g, '$1$2');
	arrTemp = search.exec(output);
	while (arrTemp) {
		if (arrTemp[0].search(/\//g) !== -1) {
			if (arrTempPrevious === true) {
				arrLevel.push(level);
				arrProcess.push([arrTemp.index]);
			}
			level -= 1;
			arrTempPrevious = true;
		} else {
			if (arrTempSingle === false) {
				level += 1;
			}
			if (arrTemp[0].search(/br/) !== -1) {
				arrTempSingle = true;
			} else {
				arrTempSingle = false;
			}
			arrLevel.push(level);
			arrProcess.push([arrTemp.index]);
			arrTempPrevious = false;
		}
		arrTemp = search.exec(output);
	}
	for (i = arrLevel.length - 1, i_end = 0; i > i_end; i -= 1) {
		string = '\n';
		if (arrLevel[i] > 0) {
			for (pos = 0; pos < arrLevel[i]; pos += 1) {
				string += '\t';
			}
		}
		arrProcess[i].push(string);
	}
	for (i = arrProcess.length - 1, i_end = 0; i > i_end; i -= 1) {
		output = output.insert(arrProcess[i][0], arrProcess[i][1]);
	}
	if (strPre) {
		element.appendChild(document.createTextNode(strPre + output));
	} else {
		element.appendChild(document.createTextNode(output));
	}
}
Aktuell ist die Version 0.03 - Anregungen und Verbesserungsvorschlägen bitte posten.
Ich weis daas der Code momentan noch Verbesserungen benötigt, aber wo ich nun etwas Unterstützung benötige, ist bei den regulären Ausdrücken.

Sind diese soweit korrekt definiert?
Kann man diese noch verbessern?
Kann man gewisse Sachen kombinieren?
 
In deinem zweiten replace (wo du die Tags klein schreiben lässt) würde ich die RegExp anders schreiben: /<[^<>]+>/g - das catchen benutzt du nicht (=> überflüssig) und sowas wie "< das Größer<br>" würdes du auch ersetzen.
Auch definierst du in deiner Ersetzungsfunktion die Variable space jedes mal neu (muss nicht unbedingt sein), htmlComment wird nicht benutzt... und außerdem hab' ich gerade gesehen dass man das Ganze sogar mit nur einem .replace machen kann (also ohne der Fallunterscheidung ob da ein \s ist oder nicht):
Code: 
output = output.replace(/<([a-zA-Z]+)([^<>]+)>)/g, function (m, tag, rest) {
		return "<" + tag.toLowerCase() + rest + ">";
	});

Das mit dem <body> ist nicht für alle Fälle anwendbar: auch ein body kann Attribute haben (bei mir ist es meistens ein class).

Code: 
output = output.replace(/(>)\s+?(<)/g, '$1$2');
ist suboptimal =>
Code: 
.replace(/>\s+</g, "><");

search hat das gleiche Problem wie oben.
Die while-Schleife kannst du eleganter machen, indem du ein do...while verwendest.
Die Erkennung des schließenden Tags ist inkorrekt: überleg' dir, was da rauskommt, wenn du '<a href="http://example.org">' hast...
Nicht nur das <br> ist ein Tag, das alleine vorkommen kann - außerdem hast du wieder das Problem: '<div class="break">'.
Das ganze Gewurschtle mit arrLevel, arrProcess, .insert, etc. finde ich viel zu umständlich. Das kannst du auch gleich in dein while einbauen...

Hier mal eine Vorschlag von mir (das mit dem <body> ist nicht dabei):
Code: 
var html = '<DIV class="was">ach<br/>was<br/><a><b>b<br/></b><i>i</i></a> </div>test';
alert(html);
html = html.replace(/>\s+</g, "><");
alert(html);
var indent = 0;
function newLine(indent){
	var ret = "\n";
	for (var i = 0; i < indent; i++){
		ret += "\t";
	}
	return ret;
}
html = html.replace(/((?:\/?>)?<\/?)([a-zA-Z]+)|\/?>/g, function(m, open, tagname){
	switch (m){
		case "/>":
			return "/>" + newLine(--indent);
		case ">":
			return ">" + newLine(indent);
		default:
			switch (open){
				case "<":
					return newLine(indent++) + "<" + tagname.toLowerCase();
				case "</":
					return newLine(--indent) + "</" + tagname.toLowerCase();
				case "/><":
					indent--;
					return "/>" + newLine(indent++) + "<" + tagname.toLowerCase();
				case "/></":
					indent--;
					return "/>" + newLine(--indent) + "</" + tagname.toLowerCase();
				case "><":
					return ">" + newLine(indent++) + "<" + tagname.toLowerCase();
				case "></":
					return ">" + newLine(--indent) + "</" + tagname.toLowerCase();
			}
	}
	return m;
});
alert(html);
- arbeitet etwas anders.

EDIT: ein paar Fehler entfernt und ein besseres Beispiel gebastelt.
 
Zuletzt bearbeitet:
Danke schonmal für dein Post. Das mit den regulären Ausdrücken hatte ich mir schon so gedacht. Ich tu mir damit irgendwie immer schwer, keine Ahnung warum. Evtl. weil mir das noch nie einer so richtig erklären konnte...

Werde mir mal deine regulären Ausdrücke mal näher anschauen und versuchen sie nachzuvollziehen.
Auch werde ich mir mal dein Beispiel genauer anschauen.

Mal sehen wie ich mit deinen Informationen weiterkomme.
 
So ... hab mal etwas geschaut. Das Problem: '<div class="break">' hatte ich nicht, wie ja auch auf der Projektseite bei z.B. '<td class="active" style="color: red;">' zu sehen ist. Das mit dem <body> stimmt soweit, daran hatte ich nicht gedacht. Habe mir mal folgendes angeschaut und versucht zu verstehen:
Code: 
replace(/((?:\/?>)?<\/?)([a-zA-Z]+)|\/?>/g, function(m, open, tagname)

Was ich (hoffentlich) verstanden habe:

Das ist eine Gruppierung:
Code: 
(?:\/?>)	entspricht der Gruppierung von /> oder > welche jedoch nicht gespeichert wird.

replace behandelt zwei Suchmuster (Muster a oder(|) Muster b) und übergibt das Ergebnis an m:
Code: 
m = ((?:\/?>)?<\/?)([a-zA-Z]+)	entspricht: /></[a-zA-Z]+ oder /><[a-zA-Z]+
					></[a-zA-Z]+ oder ><[a-zA-Z]+
					</[a-zA-Z]+ oder <[a-zA-Z]+
oder(|) m = \/?>   entspricht: /> oder >

Das heist im zweiten Fall (oder(|)) sind open und tagname immer leer!
Im ersten Fall jedoch werden open und tagname so behandelt:
Code: 
open = ((?:\/?>)?<\/?)	entspricht: /></ oder /><
				></ oder ><
				</ oder <
tagname = ([a-zA-Z]+)	entspricht: Ein Buchstabe (ohne Umlaute) gefolgt von beliebig vielen weiteren Buchstaben

Ich hoffe mal das stimmt soweit?
 
Zuletzt bearbeitet:
Das mit dem class="break" bezog sich auf die Festlegung von arrTempSingle - du prüfst nicht, ob das Tag ein <br> ist, sondern ob irgendwo im Tag die Zeichenfolge "br" vorkommt - das auch bei class="break" der Fall ist. Aber, wie schon angemerkt, nicht nur ein <br> steht alleine, auch ein <img>, <hr>, etc.

Deine Analyse der RegExp stimmt so weit.
 
OK jetzt habe ich verstanden was du meinst. Immerhin bin ich aber froh das die Analyse der RegExp soweit stimmt.
Mal sehen wie ich das auf mein Projekt anwenden kann.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben