[JS] String naar HTML - Softwareontwikkeling

dinsdag 3 april 2007 20:09

Acties:

Verwijderd

Topicstarter

Ik kan nergens op het web iets vinden over het omzetten van een string naar textnodes en elementen. Raar, of zoek ik verkeerd? Ik weet dat innerHTML dit ongeveer ook doet, maar deze staat zoals velen weten niet in de specs. Ik ben dus zelf maar wat gaan experimenteren.

Zelf ben ik nog niet zo ervaren met JavaScript, maar ik doen mijn best.

Op dit moment heb ik deze functie om een string om te zetten naar tekst en smileys:

JavaScript:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>String naar HTML</title>
<style type="text/css"> p { font: .8em Tahoma; } </style>
<script type="text/javascript">

window.onload = function () {

    var string = prompt('Vul hier es wat in');
    var convert = new Array();
    
    convert = string.split(':)');
    for (var i=0;i<convert.length;i++)
    {
        convert[i] = convert[i].split(':z');
        for (var a=0;a<convert[i].length;a++)
        {
            
            convert[i][a] = convert[i][a].split(':o');
            for (var b=0;b<convert[i][a].length;b++)
            {
                document.getElementById('convert').appendChild(document.createTextNode(convert[i][a][b]));
                
                if (b<convert[i][a].length-1){
                    var smile = document.createElement('img');
                    smile.src = 'http://gathering.tweakers.net/global/smileys/redface.gif';
                    smile.alt = ':o';
                    document.getElementById('convert').appendChild(smile);
                }
            }
            
            if (a<convert[i].length-1){
                var smile = document.createElement('img');
                smile.src = 'http://gathering.tweakers.net/global/smileys/sleephappy.gif';
                smile.alt = ':z';
                document.getElementById('convert').appendChild(smile);
            }
        }
        
        if (i<convert.length-1){
            var smile = document.createElement('img');
            smile.src = 'http://gathering.tweakers.net/global/smileys/smile.gif';
            smile.alt = ':)';
            document.getElementById('convert').appendChild(smile);
        }       
    }
}
</script>

<p id="convert">

Ben er stiekem wel een beetje trots op.

Zoals je ziet is hij slecht uitbreidbaar. Laat staan geneste elementen als bijvoorbeeld STRONG en EM. Maar dat laat ik nu even terzijde.

Wat ik wil is een array met daarin de te vervangen stukjes string; :+, :), :(, etc. Een array die ik dus makkelijk kan uitbreiden met andere stukjes string.

Nu moet er dus een functie komen die automatisch de array af gaat en iets dergelijks als bovenstaand produceert. Is er iemand die mij een goede schop in de richting kan geven?

En waarom kan ik nergens iets vinden over dit soort dingen (string naar HTML)?

dinsdag 3 april 2007 20:20

Acties:

crisp

Devver

Pixelated

En waarom kan ik nergens iets vinden over dit soort dingen (string naar HTML)?

Omdat je waarschijnlijk niet op het juiste woord zoekt

Wat je hier omschrijft heet een 'parser'

Intentionally left blank

dinsdag 3 april 2007 20:21

Acties:

Verwijderd

Topicstarter

Ja daar heb ik ook naar gezocht. Dat kom ik bij functies terecht waar ze alles omzetten van string naar string, om het vervolgens alsnog met innerHTML neer te pleuren. Dat kan ik ook nog wel.

dinsdag 3 april 2007 20:23

Acties:

Verwijderd

En het werkt weer het handigst als je alles eerst opdeelt in "tokens". Dus inderdaad zorg je ervoor dat je een array krijgt met stukjes tekst, en losse smileys, in eerste instantie óók gewoon als tekst.

Als je alles heb opgedeeld, loop je alle tokens af. Is het een smiley dan maak je de benodigde smiley met document.createElement('img') etcetera. Is het tekst, dan doe je document.createTextNode('tekst'). Kortom, 1 token wordt één of meer DOM nodes. Een simpele appendChild rondt het af.

dinsdag 3 april 2007 20:42

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op dinsdag 03 april 2007 @ 20:23:
En het werkt weer het handigst als je alles eerst opdeelt in "tokens". Dus inderdaad zorg je ervoor dat je een array krijgt met stukjes tekst, en losse smileys, in eerste instantie óók gewoon als tekst.

Als je alles heb opgedeeld, loop je alle tokens af. Is het een smiley dan maak je de benodigde smiley met document.createElement('img') etcetera. Is het tekst, dan doe je document.createTextNode('tekst'). Kortom, 1 token wordt één of meer DOM nodes. Een simpele appendChild rondt het af.

Dankjewel. Hoe kan ik een string in tokens opdelen?

@crisp: Als ik wat langer zoek naar 'string parser HTML javascript' ontdek ik dat Mozilla ook z'n eigen innerHTML heeft ontwikkeld.

woensdag 4 april 2007 05:58

Acties:

chris

Verwijderd schreef op dinsdag 03 april 2007 @ 20:23:
En het werkt weer het handigst als je alles eerst opdeelt in "tokens". Dus inderdaad zorg je ervoor dat je een array krijgt met stukjes tekst, en losse smileys, in eerste instantie óók gewoon als tekst.

Als je alles heb opgedeeld, loop je alle tokens af. Is het een smiley dan maak je de benodigde smiley met document.createElement('img') etcetera. Is het tekst, dan doe je document.createTextNode('tekst'). Kortom, 1 token wordt één of meer DOM nodes. Een simpele appendChild rondt het af.

Dude, nou moet je niet alles met tokens gaan doen hoor

@ts: ik zou gewoon een simpele reguliere expressie doen als je alleen smilies doet, een stuk makkelijker. Als je inderdaad dingen als bold wil gaan doen, dan is wat Cheatah zegt zeker interessant!

woensdag 4 april 2007 14:08

Acties:

Verwijderd

Topicstarter

chris schreef op woensdag 04 april 2007 @ 05:58:
[...]

Dude, nou moet je niet alles met tokens gaan doen hoor

@ts: ik zou gewoon een simpele reguliere expressie doen als je alleen smilies doet, een stuk makkelijker. Als je inderdaad dingen als bold wil gaan doen, dan is wat Cheatah zegt zeker interessant!

Dat wil ik uiteindelijk wel. Waar moet ik nu beginnen te zoeken? 'Javascript parser' levert mij echt niets op.

woensdag 4 april 2007 14:15

Acties:

arieleks

Verwijderd schreef op woensdag 04 april 2007 @ 14:08:
[...]

Dat wil ik uiteindelijk wel. Waar moet ik nu beginnen te zoeken? Javascript paser levert mij echt niets op.

Terwijl het toch bijna Pasen is...

- Rietberg - sieben Mal sympatisch -

There are only 10 types of people, those who make stupid jokes about binary numbers and those who don't.

woensdag 4 april 2007 14:18

Acties:

Verwijderd

chris schreef op woensdag 04 april 2007 @ 05:58:

Dude, nou moet je niet alles met tokens gaan doen hoor

Als het niet hoeft, dan kun je het beter laten ja. Maar als je ook maar iets meer wilt dan simpele replaces, dan kun je ook maar meteen het best grijpen naar iets dat schaalbaar is. Replace functies zijn dat niet. Zodra je met bijvoorbeeld nesting aan de gang gaat, loop je tegen de beperkingen op.

woensdag 4 april 2007 14:18

Acties:

Verwijderd

Topicstarter

arieleks schreef op woensdag 04 april 2007 @ 14:15:
[...]

Terwijl het toch bijna Pasen is...

Ok wijsneus. *edit knop gevonden

Ok, hier schiet ik niets mee op. Ik heb geen idee waar ik moet zoeken. 'javascript tokenizer' of 'javascript parser' leveren bij Google alleen maar vraagtekens op. Héb ik mijn string al niet getokenized? Zo ja, wat is dan de volgende stap? Zo nee, hoe tokenize ik mijn string dan wel, en wat volgt er dan? Hoe maak ik een parser vervolgens schaalbaar? Waar moet ik zoeken? Waar moet ik kijken?

Het lijkt alsof iedereen weet hoe het moet, maar dat nog niemand het daadwerkelijk gemaakt heeft.

[ Voor 56% gewijzigd door Verwijderd op 04-04-2007 14:40 ]

woensdag 4 april 2007 17:37

Acties:

chris

Verwijderd schreef op woensdag 04 april 2007 @ 14:18:
[...]
Ok wijsneus. *edit knop gevonden

Ok, hier schiet ik niets mee op. Ik heb geen idee waar ik moet zoeken. 'javascript tokenizer' of 'javascript parser' leveren bij Google alleen maar vraagtekens op. Héb ik mijn string al niet getokenized? Zo ja, wat is dan de volgende stap? Zo nee, hoe tokenize ik mijn string dan wel, en wat volgt er dan? Hoe maak ik een parser vervolgens schaalbaar? Waar moet ik zoeken? Waar moet ik kijken?

Het lijkt alsof iedereen weet hoe het moet, maar dat nog niemand het daadwerkelijk gemaakt heeft.

Ok, het beste is dan om eerst te gaan tokenizen, dan te gaan parsen en dan te gaan prettyprinten.

Je tokenizer levert bijvoorbeeld een array op, met daarin allerlei elementen:

[Text("Hallo"), Smiley(":)"), TagOpen("b"), Text("World"), TagClose("b")]

Dit is dus een lineare lijst van tokens. Een token is meestal vrij simpler herkenbaar.

Vervolgens is het mooiste om dit om te zetten naar een Abstract Syntax Tree, oftewel AST. Dit levert meer een boom-structuur op:

Text "Hallo"
Smiley ":)"
Tag "b"
- Text "World"

De formatting werkt niet 100% mee, maar het idee is dat Text "World" een kind is van Tag "b".

Vervolgens kan je die boom gaan prettyprinten, oftewel: omzetten naar een string. Hiervoor ga je over alle nodes itereren, voor Text "Hallo" maak je gewoon de string "Hallo", voor Smiley ":)" maak je een img-tag, voor Tag "b" neem je de inhoud en zet je er een b-tag omheen, etc.

Alle afzonderlijke stukken zijn niet al te moeilijk. Misschien probeer ik wel een opzet te geven als ik me verveel vanavond, maar probeer het eerst zelf maar eens.

woensdag 4 april 2007 17:48

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op woensdag 04 april 2007 @ 14:18:
[...]
Het lijkt alsof iedereen weet hoe het moet, maar dat nog niemand het daadwerkelijk gemaakt heeft.

Specifiek in javascript zal je daar inderdaad weinig over vinden. Ik heb overigens wel een HTML-parser implementatie in javascript maar dat is geen open source...

Voorbeelden vind je genoeg als je bijvoorbeeld zoekt op 'UBB parser' of 'HTML parser', met name PHP voorbeelden zijn wel handig en makkelijk om te zetten naar javascript.

Wat chris beschrijft klopt, een parser bestaat meestal uit 3 onderdelen; ik noem dat altijd het tokenizen, tree-building en rendering, maar die laatste stap kan inderdaad ook weer een vorm van pretty-printing zijn waarbij je dus eigenlijk een parser hebt die puur een transformatie doet van de ene syntax naar een andere (bijvoorbeeld UBB naar HTML).

Zelf vind ik de HTML parsing rules zoals beschreven in WA1.0 wel erg handig als uitgangspunt, zeker de tokenizer is goed beschreven en makkelijk voor andere zaken toepasbaar. HTML tree-building is echter vrij complex omdat je naast tag-matching ook nog met allerlei andere regels te maken hebt. Voor tag-matching zelf (onderdeel van de tree-building) heb je ook veel verschillende soorten algorithmen die allemaal anders omgaan met unmatched tags - dat is dus meer een kwestie van smaak en hoe ver je wilt gaan met 'error-correctie'.

Bottom-line is dat het schrijven van een goede parser zeker geen eenvoudige klus is, en eerlijk gezegd ken ik ook maar erg weinig echt goede parser-implementaties.

Intentionally left blank