Ergebnis 1 bis 6 von 6
  1. #1
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

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

    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 (HTML-Quellcodeanzeige mit javascript im iframe) 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?
    Hoffe ich konnte helfen

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.688

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

    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.
    Geändert von kkapsner (06-01-2012 um 15:39 Uhr)

  3. #3
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

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

    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.
    Hoffe ich konnte helfen

  4. #4
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

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

    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?
    Geändert von miniA4kuser (09-01-2012 um 11:54 Uhr)
    Hoffe ich konnte helfen

  5. #5
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.688

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

    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.

  6. #6
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

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

    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.
    Hoffe ich konnte helfen

Ähnliche Themen

  1. Objekte in Javascript ausgeben
    Von scorpio86 im Forum JavaScript
    Antworten: 6
    Letzter Beitrag: 23-05-2011, 10:36
  2. mit php javascript ausgeben
    Von arnes im Forum Serverseitige Programmierung
    Antworten: 7
    Letzter Beitrag: 16-07-2009, 13:38
  3. Antworten: 4
    Letzter Beitrag: 30-03-2009, 21:37
  4. Antworten: 37
    Letzter Beitrag: 10-07-2007, 16:19
  5. HTML Tabellen von Javascript ausgeben lassen?
    Von ShadowOnWalk im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 14-03-2007, 08:38

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •