Wie können existierende HTML-Seiten mit Hilfe von RegExp in eine "Pseudo PowerPoint Slide Show" gewandelt werden?
Es soll von (vorhandenen) "Standard-HTML"-Seiten ausgegangen werden. Die visuelle Seitenstruktur sei wesentlich durch die h1, h2, h3-Überschriften festgelegt. Eine Überschrift und der zugehörigen Text bilde eine Einheit. Es liege keine "kreuzende Überschneidung" von div-Tags vor.
Die Umwandlung des document.body-Strings der gegebenen HTML-Seite in einen "PowerPoint Slide Show"-HTML-String soll mit Hilfe von regulären Ausdrücken erfolgen. Hier ist ein Demo-Beispiel, das das Ergenis zeigt.
Einfach ausgedrückt wird jedes h-Tag zu einem a-Tag, das der Auswahl des zugehörigen Informationen dient. Alle a-Tags sollen durchnummeriert werden und oben auf dem Bildschirm stets sichtbar sein. Es ist jeweils nur ein h-Kontext (= "ein Slide") sichtbar.
Zum bequemen Vorgehen, Enwickeln und Testen werden die Quelltexte nach jedem Umwandlungsschritt zunächst in Textareas angezeigt:
<form method="post" action=""> <textarea id='TA1' rows='5' style='width:100%'></textarea> <textarea id='TA2' rows='5' style='width:100%'></textarea> <textarea id='TA3' rows='5' style='width:100%'></textarea> <textarea id='TA4' rows='5' style='width:100%'></textarea> </form>
<div id="TEST_ID"> <h2> Titel 0 </h2><p> Text zu 0 </p><!-- Kommentar --> <h2> Titel 1 </h2><p> Text zu 1 </p> <h3> Titel 2 </h3><p> Text zu 2 </p> </div>
Zunächst wird das Grundmuster für ein gebräuchliches "Code-Pattern-Gerüst" eingerichtet.
var ppps = (function (win) { // ppps erinnert an "PowerPoint Slide Show"
var doc = win.document,
s = '', // s: pseudo globaler body.innerHTML-String
h_nr = 0, // h_nr: zaehlt die h-tags
ID = '"NR', // ID fuer h-Kontext, der dem h-Tags nachfolgt
style = ''; //
return {
// hierher kommen die zu entwickelnden Funktionen
version:'000000'
};} (this));
Die Test-Aufrufe der entwickelnden Funktionen kommen in window.onload = function() {...};
window.onload = function() {
// Hierher kommen die Aufrufe nach dem Laden der Seite
};
Für die Transformation des document.body-String in einen "PowerPoint Slide Show" wird stets die private Variable s verwendet. Das einfache test_obj (siehe id="TEST_ID") ist an Anfang sinnvoll (wegen der besseren Übersichtlichkeit). Bitte ergänzen:
get_body_str: function (test_obj) {
s = test_obj.innerHTML || document.body.innerHTML;
return ____________;
},
Nach der Funktionsausführung von
ppps.get_body_str(document.getElementById("TEST_ID")).ta(1);
soll durch .ta(1) die private Variable s (HTML-Source-Code)
in der Textarea "TA1" angezeigt werden. Bitte ergänzen:
ta: function (nr) { // zeige s in textarea an:
doc.getElementById(_________ + nr).value = s;
return ___________;
},
Ein Aufruf von ppps.get_body_str(document.getElementById("TEST_ID")).ta(1); zeigt den aktuellen Quelltext von "TEST_ID" in TA1 an.
Vorhanden HTML-Kommentare werden nicht mehr benötigt, können stören und sollen aus dem document.body-Quelltext (HTML-Source-Code) gelöscht werden. Bitte ergänzen:
del_kommentare: function () {// loesche alle HTML-Kommentare
s = s.replace(___________________________________, '');
return this;
},
Die gegebene Seite habe eine visuelle Seitenstruktur, bei der nach jedem h-Tag der zugehörige Informationskontext folgt. Ein div-Tag ( "wrapper_div") soll das h-Tag und den zugehörigen Informationskontext (beim letzten h-Tag bis dokument-Ende) eingerahmen.
Jedes "wrapper_div" wird mit class-, style-, id-Attribut versehen.
Jedes "wrapper_div" sieht etwa so aus:
<class="ppps_div" style='display:block/none;' id="ID ...
Achtung!
Bei regulären Ausdrücken kann mit $& links und recht vom (gesamten) Suchausdruck
pre- und post-Text gemäß pre$&post eingefügt werden. Bitte ergänzen.
div_wrapper: function () {
s += ___________________; // ergänze am body-ende ein schliessendes div
// baue wrapper_div
// (siehe Wirkung von $&)
s = s.replace(/<h[1-6]_________________________________________<\/\1>/g,
'</div>\n<div class="ppps_div" style="display:none;" id=' + ID + '>\n$&');
// loesche den body-anfang bis einschließlich dem ersten <\/div>
s = s.replace(/______________________________/g, '');
return this;
},
Ein Aufruf von ppps.get_body_str(document.getElementById("TEST_ID")).ta(1).del_kommentare().div_wrapper().ta(2) ergibt in TA2 etwa aus:
<div class="ppps_div" style="display:none;" id = "NR> <h2> Titel 0 </h2><p> Text zu 0 </p> </div> <div class="ppps_div" style="display:none;" id = "NR> <h2> Titel 1 </h2><p> Text zu 1 </p> </div> <div class="ppps_div" style="display:none;" id = "NR> <h3> Titel 2 </h3><p> Text zu 2 </p> </div>
Für die Auswahl eines "wrapper_div" werden eindeutige "wrapper_div"-Identifizierungen (id="ID0", id="ID1", id="ID2", ...) gebraucht. Hierzu kann die private Variable h_nr verwendet werden. h_nr wird in Closure hochgezählt. Bitte ergänzen.
numeriere_ID: function () {
h_nr = 0;
s = s.replace(/__________________________/g, function (a, b) {
a = _____________________________________;
h_nr += 1;
return ___________;
});
return this;
},
Ein gefundener Suchausdruck enthält gespeicherte Teil-Suchausdrücke, die an den runden Klammern erkennbar sind. Mit diesen Teil-Suchausdrücken b, c, d, e, f, g, h für ein h-Tag kann das neue a-Tag zusammen gesetzt werden, etwa
'<a class="ppps_a" title="' + _______________ + '" href="javascript:ppps.show_slide(\'' ______________ '\')">'
In der Closure wird der a-Tag-String in r gepush't. Die Funktion function (a, b, c, d, e, f, g, h) gibt einfach den ungeänderten Gesamt-find-String a zurück.
Mit r.join('\n ') können alle Array-Elemente zu einen String verbunden werden, der dann im ppps_top-div an den Anfang des neu erstellten document.body-Strings kommen.
h_tags_to_a: function () {
var pre, r = []; // r-elemente fuer innerHTML-strings der h-tags, die zu a-tags werden
// b c d e f g h
s = s.replace(/(<div [\s\S]*?)(NR)(\d+)([\s\S]*?)(<h[1-6][^>]*>)([\s\S]*?)(<\/h\d>)/g,
function (a, b, c, d, e, f, g, h) {
___________________________________________________________________________________________
return a;
});
ppps_top = '<div class="ppps_top">Präsentation\n ' + ____________________ + '\n</div>';
s = unescape(style) + ppps_top + s;
return this;
},
Der folgende Aufruf sollte (im Erfolgsfall) gewünschte Ausgaben ergeben...
ppps.get_body_str(document.getElementById("TEST_ID")).ta(1)
.del_kommentare()
.div_wrapper().ta(2)
.numeriere_ID().ta(3)
.h_tags_to_a().ta(4);
Anstelle der Verwendung ppps.show_slide(id) bei einem a-Tag-Aufruf kann eine globale Funktion show_slide (id) verwendet werden. In diesem Fall wird dann für die Seiten der "pseudo PowerPoint Slide Show" kein ppps-Objekt mehr benötigt.
function show_slide (id) { var i=0;
while(document.getElementById('NR'+i)) {
document.getElementById('NR'+i).style.display='none';
i += 1;
} document.getElementById(id).style.display='block';
}
Wie kann diese Funktion (im script-Tag) vor den Quelltext eingefügt werden?
Antwort: _______________________________________________________
_______________________________________________________
_______________________________________________________
Wie kann ein geeigneter Präsentationsstyle vor den Quelltext eingefügt werden?
Antwort: _______________________________________________________
_______________________________________________________
_______________________________________________________