[3.3] Probleme mit BBCode Verständnis | entwerfen eines Table BBCodes

[Meinphpaccount]

Guten Abend!

Ich wollte für ein Forum einen Tabellenbbcode haben, wo man mehrere Textfelder haben kann, und je nach Button wird immer nur einer der Texte sichtbar.
Die Funktion allgemein habe ich in JS auch hinbekommen, jedoch habe ich nicht wirklich viel Erfahrung und bin nicht ganz sicher, wie ich sie in BBCode zu überführen kann.
Ich wollte hier einmal fragen, ob der Ansatz, den ich im Code unten verfolge überhaupt annähernd richtig ist.
[table]{TEXT}[/table]

Code: Alles auswählen

var text = {TEXT}.split('|');
var docFrag = document.createDocumentFragment();
for (var i=0; i < text.length ; i++){
    var elem = document.createElement('input');
    elem.style.padding = '5px';
    elem.type = 'button';
    elem.value = (i+1);
    elem.addEventListener('click', function handleClick(event) {
    if (this.parentNode.parentNode.getElementsByTagName('div')[event.target.value].style.display != ''){ 
    
            this.parentNode.parentNode.getElementsByTagName('div')[event.target.value].style.display = '';  
            for (var a=1; a < this.parentNode.parentNode.getElementsByTagName('div').length ; a++){
            if (a != event.target.value) {
                this.parentNode.parentNode.getElementsByTagName('div')[a].style.display = 'none';
            }
            }
        } else { 
            
            this.parentNode.parentNode.getElementsByTagName('div')[event.target.value].style.display = 'none'; 
        }
    });
    
    
    docFrag.appendChild(elem);
}
for (var i=0; i < text.length ; i++){

    var divElem = document.createElement('div');
    divElem.textContent = text[i];
    divElem.style.paddingTop = '5px';
    divElem.style.marginTop = '5px';
    divElem.style.display = 'none';
    docFrag.appendChild(divElem);
}
document.body.appendChild(docFrag); 

Auch ist mir bewusst, das es vermutlich nicht das schlaueste Ist den Text mittels des | aufzuteilen. Jedoch wüsste ich nicht wie man sonst herausfindet wie viele verschiedene "Seiten" es geben soll.

Ich freue mich über jegliche Antworten

[IMC]

Für die HTML Ersetzung müssen ein paar Anpassungen gemacht werden.
Die Codezeile document.body.appendChild(docFrag); wurde entfernt.

Entscheident sind die ersten 5 Zeilen. Damit wird sicher gestellt das deine Buttons die gewünschte Position im Beitrag haben.

Code: Alles auswählen

<div class=table_bbc></div>
<script>
var text = "{TEXT}".split('|');
var docFragAry = document.getElementsByClassName('table_bbc');
var docFrag = docFragAry[docFragAry.length-1];

for (var i=0; i < text.length ; i++){
    var elem = document.createElement('input');
    elem.style.padding = '5px';
    elem.type = 'button';
    elem.value = (i+1);
    elem.addEventListener('click', function handleClick(event) {
    if (this.parentNode.parentNode.getElementsByTagName('div')[event.target.value].style.display != ''){ 
    
            this.parentNode.parentNode.getElementsByTagName('div')[event.target.value].style.display = '';  
            for (var a=1; a < this.parentNode.parentNode.getElementsByTagName('div').length ; a++){
            if (a != event.target.value) {
                this.parentNode.parentNode.getElementsByTagName('div')[a].style.display = 'none';
            }
            }
        } else { 
            
            this.parentNode.parentNode.getElementsByTagName('div')[event.target.value].style.display = 'none'; 
        }
    });
    
    
    docFrag.appendChild(elem);
}
for (var i=0; i < text.length ; i++){

    var divElem = document.createElement('div');
    divElem.textContent = text[i];
    divElem.style.paddingTop = '5px';
    divElem.style.marginTop = '5px';
    divElem.style.display = 'none';
    docFrag.appendChild(divElem);
}
</script>