JS: bbcode regular expression invoegen link

[Verwijderd]

Ik ben bezig met het maken van een text-editor..waar je ook een live preview kan zien .. en de textarea schrijf ik de woorden tussen macro's om ze bijvoorbeeld dikgedrukt te maken. Deze worden tijdens de preview vervangen door html code mbv regular expressions.

Het lukt zover bij bold, title, en het invoegen van breaks.. alleen bij het invoegen van links pakt hij elke keer de eerste patroon voor de regular expressions en vervangt deze patroon met alle andere gevonden in het document..

Inprincipe overschrijft hij elke elke gevonden string of hij vervangt alles maar een keer.. ik ben de weg kwijt hier..zou iemand van hulp kunnen zijn ??

Als het niet duidelijk is zeg je het maar..

dit is de functie waar het probleem in zit..

========================================================

function show_preview() {
var objElement = document.getElementById("content_box").value;
var objDest = objElement;

var aPattern = new Array();
aPattern[0]="(\\[B\\])";
aPattern[1]="(\\[\\/B\\])";
aPattern[2]="(\\[T\\])";
aPattern[3]="(\\[\\/T\\])";
aPattern[4]="(\\[BRK\\])";
aPattern[5]="(\[L=(.*?)\\](.*?)\\[\/L\\])";

var aReplace = new Array();
aReplace[0]="<b>";
aReplace[1]="<\/b>";
aReplace[2]="<h3>";
aReplace[3]="<\/h3>";
aReplace[4]="<br\/>";
aReplace[5]="";

var aMatch = new Array();
var aMultiMatch = new Array();

for( i = 0; i < aPattern.length; i++ ) {
aMatch[i] = new RegExp( aPattern[i], "g" );
aMultiMatch = aMatch[i].exec( objElement );

if( aMultiMatch != null ) {
if( aMultiMatch.length > 2 ) {
objElement = objElement.replace( aMatch[i], aReplace[i] + "<a href=\"" + aMultiMatch[2] + "\">" + aMultiMatch[3] + "</a>" );
} else {
objElement = objElement.replace( aMatch[i], aReplace[i] );
}
}
}

objPreview.style.display = 'block';
objPreview.innerHTML = objElement;
}

========================================================

Als je een voorbeeld wilt zien kan het geheel zippen.. als het nodig is mail ik het wel..

[BtM909]

Geef maar eens een werkende voorbeeld of link en het liefst een gestripte versie zodat we niet door 1300 regels source code hoeven te worstelen

[Verwijderd]

ik heb op dit moment geen server online hoe kan ik je het beste het laten zien ?

[Rekcor]

Verwijderd schreef op maandag 07 juli 2008 @ 15:10:
ik heb op dit moment geen server online hoe kan ik je het beste het laten zien ?

Op http://www.redrival.com/ kun je een gratis account aanmaken. Anders kun je hier stukken code plaatsen tussen de [ code ] [ /code ] tags. Zie hiervoor de diverse faqs op dit forum.

[Verwijderd]

http://zaak.trendesign.nl/test/index.html

[Cousin Boneless]

Volgens mij klopt de regex niet helemaal.

code:

aPattern[5]="(\[L=(.*?)\\](.*?)\[\/L\\])";

moet dat niet zijn:

code:

aPattern[5]="(\[L=(.*?)\\](.*?)\\[/L\\])";

Omdat alles letterlijk is (geen character classes) en je zowel voor javascript als voor de regex moet escapen... Altijd lastig te zien zoiets.

Edit: merk dat dit forum ook het eea weglaat als het niet in code staat
Edit 2: de forward slash is geen special character en hoeft niet escaped te worden

Edit laat maar: Nogal wiedes.. je gebruikt een regex match en een replace na elkaar waarbij de eerste alleen op de eerste match slaat. Dus je moet eerst splitten en dan de stukjes replacen, of gebruik maken van een preg_replace_callback functie (als dat al in Javascript bestaat). Beter ook om dit server-side op te lossen.

[ Voor 49% gewijzigd door Cousin Boneless op 08-07-2008 01:49 ]

[Cousin Boneless]

Eindelijk wat gevonden. Door die global geef je aan dat er meerdere matches kunnen worden gevonden, maar je moet wel zelf de exec in een loop herhalen om de volgende te vinden. Je krijgt ook extra informatie terug over de startindex en eindindex van het pattern. Het is aan te raden om ook alleen de replace uit te voeren op de substring die binnen de lus gevonden wordt:

JavaScript:

    <script type="text/javascript">
    var testInput = "lala [L=tralala]tralalie[/L] en [L=humhum]linkje[/L] en nog wat";
    var re = /\[L=(.*?)\](.*?)\[\/L\]/gi;

    while (matches = re.exec(testInput))
    {
        // Dus alleen hierbinnen replacen
        alert(matches.index);
        alert(matches.lastIndex);
        
        alert(matches[1]);
        alert(matches[2]);
    }
    </script>

In dit eenvoudige geval hoef je ook niet eerst te matchen, maar kun je direct replace gebruiken, omdat je je data toch niet manipuleert. http://www.devguru.com/technologies/javascript/11285.asp Maar je zal zo dadelijk vast ook op http:// willen testen.

[Verwijderd]

Ik wil niet vervelend doen, maar kan je niet beter een AJAX oplossing gebruiken om de inhoud van het form naar de server te sturen, die je een preview terug geeft?
In forum software kan je namelijk nog wel eens custom BBcodes maken, die je dan dus ook in je javascript moet gaan implementeren.

[Cousin Boneless]

Toch een callback mogelijk. Wel zo makkelijk:

JavaScript:

    <script type="text/javascript">
        function replaceLinks(re, str)
        {
            return str.replace(re, 
                            function(match, sub1, sub2)
                            {
                                return '<a href="' + sub1 + '">' + sub2 + '</a>';
                            });
        }

        var testInput = "lala [L=tralala]tralalie[/L] en [L=humhum]linkje[/L] en nog wat";
        var re = /\[L=(.*?)\](.*?)\[\/L\]/gi;

        var testOutput = replaceLinks(re, testInput);
        alert(testOutput);
    </script>

[ Voor 25% gewijzigd door Cousin Boneless op 08-07-2008 03:20 ]

[Verwijderd]

Thanks jongens voor de reacties..ik zal kijken of ik het kan implementeren..het is wel zo dat die global een probleem kon vormen..maar die had ik nodig om alle matches in 1 keer te vervangen, alleen bij het invoegen van links is dat geval anders..met de regex voor die link is volgens mij niets mis..want dat werkt prima..

[Rekcor]

Verwijderd schreef op dinsdag 08 juli 2008 @ 02:31:
Ik wil niet vervelend doen, maar kan je niet beter een AJAX oplossing gebruiken om de inhoud van het form naar de server te sturen, die je een preview terug geeft?
In forum software kan je namelijk nog wel eens custom BBcodes maken, die je dan dus ook in je javascript moet gaan implementeren.

Ik begrijp de argumentatie niet: bij de AJAX-oplossing moet je e.e.a. toch op de server afhandelen (en dus daar implementeren?).

Overigens lijkt het me wel goed om een duidelijke keus te maken: wat doe je op de client en wat op de server? Het is namelijk - onderhoudstechnisch gezien - lastig als sommige dingen op het een en andere dingen weer op de ander gebeuren.

[Cousin Boneless]

Dit op de client doen is natuurlijk heel gevaarlijk. Je kan de procedure zo omzeilen en er een script tag indrukken ipv een anchor.

Edit: ow.. alleen voor de preview is geen probleem.

[ Voor 19% gewijzigd door Cousin Boneless op 08-07-2008 11:29 ]

[Tarabass]

Ben ook met zoiets bezig, maar handel alles af op server-niveau in PHP. Wat zou beter zijn?

[Cousin Boneless]

Server side. Anders moet je het twee keer implementeren. Dus dat AJAX idee voor de preview is zo gek nog niet.