Unfertige HTML Ersetzungsfunktion

Guten Tag.
Ich habe eine JavaScript Funktion zum ersetzen der <HTML-Tags> mit [Code-Tags] geschrieben. Leider funktioniert diese nicht richtig. Evtl. kann mir hier jemand einen Tipp oder Hinweis geben wie ich das eine oder andere besser machen könnte.

HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>TEST</title>
        <meta charset="UTF-8" />
        <script src="html2code.js"></script>
        <script src="code2html.js"></script>
        <script >
            window.onload = function() {
            
                var htmlstring = document.getElementById("container").innerHTML;
                var bbcode = html2code(htmlstring);
                var htmlcode = code2html(bbcode);
                document.getElementById("bbcodecontainer").innerText = bbcode;
                document.getElementById("htmlcodecontainer").innerText = htmlcode;
                document.getElementById("htmloriginal").innerText = htmlstring;

            };
        </script>
        <script>
        </script>
    </head>
    <body>
        <div id="bbcodecontainer" style="margin: 20px; padding:20px; border: 2px solid black;">

        </div>

        <div id="htmlcodecontainer" style="margin: 20px; padding:20px; border: 2px solid black;">

        </div>
       
        <div id="htmloriginal" style="margin: 20px; padding:20px; border: 2px solid black;">

        </div>

        <div id="container" style="margin: 20px; padding:20px; border: 2px solid black;">
           
            <div id="artikel">
                <h1>Überschrift</h1><br>
                <h2>Unterüberschrift</h2><br><img src="http://www.example.com/bild.jpg" width="100"><img src="http://www.example.com/bild.jpg" width="100">
                <span id="text"><div id="gehtsoweitdoch"></div><div><div><br><br></div></div>
                    <p>Testtext<br> Testtext <b></b><b></b> <font face="Arial">TESTARIAL</font>Testtext <i>TEST</i> <i>TEST</i> Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext
                    Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext<br>
                    Testtext Testtext <a href="https://www.example.com/image/index.php">Link</a>Testtext Testtext Testtext Testtext Testtext Testtext Testtext Testtext </p>
                </span>
            </div>
           
           
        </div>
    </body>
</html>
Code:
function html2code (string) {
   
    var html = string;
   
    var html2 = html;
   
    var search = [
       
        ["SPAN" , /<span((\ {0,10}[\w]{2,50}\=\"[\w\d.:#;]*\")*)?>/g, /<\/span>/g, "[SPAN \"x1\"]", "[/SPAN]" ] ,
        ["FONT", /<font(\ {0,10}[\w]{2,50}\=\"[\w\d.:#;]*\")*>/g, /<\/font>/g , "[FONT \"x1\"]", "[/FONT]"] ,
        ["A", /<a( href\=\"(http[s]?:\/\/\w{2,3}\.[\w\d-]{3,40}\.\w{2,10})?((\/\w{2,30})*)?(\/?\w{1,40}\.\w{2,4})?(\?\w{2,30}\=[\w\d]{1,100}(&amp\;\w{1,30}\=[\w\d]{1,100})?)?\"(((\ {1,10}\w{2,50}\=\"[\w\d.:#;]*\")*)?\ {0,10})?(\/)?)?>/g,/<\/a>/g ,
         "[A href=\"x\"]", "[/A]"] ,
        ["DIV", /<div((\ {0,10}[\w]{2,50}\=\"[\w\d.:#;]*\")*)?>/g,/<\/div>/g , "[DIV \"x1\"]", "[/DIV]"] ,       
        ["BR", /<br>/g, null,  "[BR]", null] ,   
        ["IMG", /<img\ {0,10}src\=\"(http[s]?:\/\/\w{2,3}\.[\w\d-]{3,40}\.\w{2,10})?((\/\w{2,30})*)?(\/?\w{1,40}\.\w{2,4})?(\?\w{2,30}\=[\w\d]{1,100}(&amp\;\w{1,30}\=[\w\d]{1,100})?)?\"(((\ {1,10}\w{2,50}\=\"[\w\d.:#;]*\")*)?\ {0,10}(\/)?)?>/g,
        null, "[IMG src=\"x\" \"x1\"]", null ] ,       
        ["H1", /<h1>/g,/<\/h1>/g , "[H1]", "[/H1]"] ,       
        ["H2", /<h2>/g,/<\/h2>/g , "[H2]", "[/H2]"] ,       
        ["H3", /<h3>/g,/<\/h3>/g , "[H3]", "[/H3]"] ,       
        ["H4", /<h4>/g,/<\/h4>/g , "[H4]", "[/H4]"] ,       
        ["H5", /<h5>/g,/<\/h5>/g , "[H5]", "[/H5]"] ,   
        ["I", /<i>/g,/<\/i>/g , "[ITALIC]", "[/ITALIC]"] ,       
        ["B", /<b>/g,/<\/b>/g , "[BOLD]", "[/BOLD]"],   
        ["P", /<p>/g,/<\/p>/g , "[P]", "[/P]"]       
       
        ];
                   
    var erg = new Array;
    erg[0] = new Array;
    erg[1] = new Array;
   
    var element1 = new Array;
    element1[0] = new Array;
   
    var element2 = new Array;
    element2[0] = new Array;
   
    var erg2 = new Array;
    var pos2 = new Array;
   
    var j = 0;
    var j2 = 0;
       
    // Holen der Positionen und der mit den Mustern übereinstimmenden HTML Tags
   
    for( var i = 0; i < search.length; i++) {
       
        while((element1 = search[i][1].exec(html)) != null ) {        
           
          if(erg[j] != undefined)  erg[j][0] = element1[0];
          if(erg[j] != undefined)  erg2.push(erg[j][0]);
          if(erg[j] != undefined)  pos2.push(element1.index);
         
            if(search[i][2] != null) {
                while((element2 = search[i][2].exec(html)) != null ) {
                     if(erg[j2] != undefined) erg[j2][1] = element2[0];
                     if(erg[j2] != undefined) erg2.push(erg[j2][1]);
                     if(erg[j2] != undefined) pos2.push(element2.index);
                     j2++;
                }
            }
           
            j++;
        }
        j = 0;
        j2 = 0;
    }
   
    var search2 = new Array;
    var result = "";   
   
    var pos2B = pos2;
    var count = pos2.length;
   
    // Array sortiert zurückgeben lassen
    for(var i = count; i >= 0; i--) {
       
        if(pos2[i] != undefined) {
           
            for(var j = count; j >= 0; j--) {        
        
                if (pos2B[j] != undefined) {
                   
                    if (pos2[i] >= pos2B[j]) {
                       
                        var posA = pos2[i];
                        var posB = pos2B[j];
                       
                        pos2[i] = posB;
                        pos2[j] = posA;
                       
                        var ergA = erg2[i];
                        var ergB = erg2[j];
                       
                        erg2[i] = ergB;
                        erg2[j] = ergA;                       
                       
                    }
                }
            }
        }
    }
   
    var erg2html = new Array;
   
    for( var i = 0; i < erg2.length; i++) {
        erg2html[i] = erg2[i];
    }
   
    // Hier geht es um die Textinhalte zwischen den HTML-Tags
   
    var texte = new Array;
   
    for( var i = 0; i < erg2.length; i++) {
        // console.log(erg2[i]);
        html2 = html2.replace(RegExp(erg2[i], "g"), ',');
    }
   
    texte = html2.split(",");
    var textarray = new Array;
    var z = 0;
   
    for( var i = 0; i < texte.length; i++ ) {
        texte[i] = texte[i].trim();
        if(texte[i].length > 0 ) { textarray[z] = texte[i]; z++; }
    }
   
    /*for( var i = 0; i < textarray.length; i++) {
         console.log(textarray[i]);
    }*/
   
    var  erg2B = new Array;
    for( var i = 0; i < erg2.length; i++) {
        erg2B[i] = erg2[i];
    }
   
    // Wo ist der Text positioniert ?
   
    for( var i = 0; i < textarray.length; i++) {
        var n = html.indexOf(textarray[i], 0);
        // console.log(n);       
    }
   
   
    // ALLE TAGS MIT DEN ERSATZMUSTERN ERSETZEN
   
    for( var i = 0; i < search.length; i++) {
        for( var j = 0; j < erg2.length; j++ ) {
           
            if( ( erg2[j].replace(search[i][1], search[i][3]) != undefined )){
               
                 erg2[j] = erg2[j].replace(search[i][1], search[i][3]) ;
                 erg2[j] = erg2[j].replace(search[i][1], search[i][3]) ;
                
                 }
                
            if( ( erg2[j].replace(search[i][2], search[i][4]) != undefined )){
                 erg2[j] = erg2[j].replace(search[i][2], search[i][4]); }
                
        }
    }   
   
    // DIE ATTRIBUTE EINFÜGEN   
   
    for(var i = 0; i < erg2.length; i++) {
       
        if((wert = erg2B[i].match(/\"(http[s]?:\/\/\w{2,3}\.[\w\d-]{3,40}\.\w{2,10})?((\/\w{2,30})*)?(\/?\w{1,40}\.\w{2,4})?(\?\w{2,30}\=[\w\d]{1,100}(&amp\;\w{1,30}\=[\w\d]{1,100})?)?\"/g)) != null){
           
            for(var k = 0; k < wert.length; k++) {        
                if( wert[k].length !== 0) { // in dem Wert Array das Attribut finden
                    var value1 = wert[k];   
                    erg2[i] = erg2[i].replace(/\"x\"/, value1);
                    // console.log(erg2[i]);
                }
            }
       
        }
       
        if((wert = erg2B[i].match(/(\ {0,10}[\w]{2,50}\=\"[\w\d.:#;]*\")*/g)) != null){
           
            for(var k = 0; k < wert.length; k++) {        
                if( wert[k].length !== 0) { // in dem Wert Array das Attribut finden
                    var value1 = wert[k];   
                    erg2[i] = erg2[i].replace(/\"x1\"/, value1);
                    // console.log(erg2[i]);
                }
            }
       
        }
    }
   
    // Die Tags mit den Ersatzmustern wieder in das HTML an die Positionen bringen
    for( var i = 0; i < erg2html.length; i++ ) {
        html = html.replace(erg2html[i], erg2[i]);
    }
   
    // Fehlerbehebung
    html = html.replace(/<div>/g, "[DIV]");
    html = html.replace(/<\/div>/g, "[/DIV]");
    html = html.replace(/<br>/g, "[BR]");
   
    result = html;
   
    return result;
}
Code:
function code2html (string) {
   
    var html = string;
   
    var html2 = html;   
   
    var search = [
       
        ["SPAN" , /\[SPAN((\ {0,10}[\w]{2,50}\=\"[\w\d.:#;]*\")*)?\]/g, /\[\/SPAN\]/g, "<span \"x1\">", "<\/span>" ] ,
        ["FONT" , /\[FONT((\ {0,10}[\w]{2,50}\=\"[\w\d.:#;]*\")*)?\]/g, /\[\/FONT\]/g, "<font \"x1\">", "<\/font>" ] ,
        ["A" , /\[A\ {0,10}href\=\"http[s]?:\/\/\w{2,10}\.[\w\d-]{1,50}\.\w{2,10}((\/\w{2,30})*)?(\/?\w{1,40}\.\w{2,4})?\"((\ {0,10}[\w]{2,50}\=\"[\w\d.:#;]*\")*)?\ {0,10}\]/g,
        /\[\/A\]/g, "<a href=\"x\">", "</a>" ],
        ["DIV", /\[DIV((\ {0,10}[\w]{2,50}\=\"[\w\d.:#;]*\")*)?\]/g,/\[\/DIV\]/g , "<div \"x1\">", "</div>"] ,       
        ["BR", /\[br\]/g, null,  "<br>", null] ,           
        ["IMG", /\[IMG\ {0,10}src\=\"http[s]?:\/\/\w{2,10}\.[\w\d-]{1,50}\.\w{2,10}((\/\w{2,30})*)?(\/?\w{1,40}\.\w{2,4})?\"((\ {0,10}[\w]{2,50}\=\"[\w\d.:#;]*\")*)?\ {0,10}\]/g,
        null, "<img src=\"x\" \"x1\">", null ] ,           
        ["H1", /\[H1\]/g, /\[\/H1\]/g , "<h1>", "</h1>"] ,   
        ["H2", /\[H2\]/g, /\[\/H2\]/g , "<h2>", "</h2>"] ,   
        ["H3", /\[H3\]/g, /\[\/H3\]/g , "<h3>", "</h3>"] ,   
        ["H4", /\[H4\]/g, /\[\/H4\]/g , "<h4>", "</h4>"] ,   
        ["H5", /\[H5\]/g, /\[\/H5\]/g , "<h5>", "</h5>"] ,   
        ["I", /\[ITALIC\]/g, /\[\/ITALIC\]/g , "<i>", "</i>"] ,   
        ["B", /\[BOLD\]/g, /\[\/BOLD\]/g , "<b>", "</b>"] ,   
        ["P", /\[P\]/g, /\[\/P\]/g , "<p>", "</p>"]
               
        ];
                   
    var erg = new Array;
    erg[0] = new Array;
    erg[1] = new Array;
   
    var element1 = new Array;
    element1[0] = new Array;
   
    var element2 = new Array;
    element2[0] = new Array;
   
    var erg2 = new Array;
    var pos2 = new Array;
   
    var j = 0;
    var j2 = 0;
       
    // Holen der Positionen und der mit den Mustern übereinstimmenden HTML Tags
   
    for( var i = 0; i < search.length; i++) {
       
        while((element1 = search[i][1].exec(html)) != null ) {        
           
          if(erg[j] != undefined)  erg[j][0] = element1[0];
          if(erg[j] != undefined)  erg2.push(erg[j][0]);
          if(erg[j] != undefined)  pos2.push(element1.index);
         
            if(search[i][2] != null) {
                while((element2 = search[i][2].exec(html)) != null ) {
                     if(erg[j2] != undefined) erg[j2][1] = element2[0];
                     if(erg[j2] != undefined) erg2.push(erg[j2][1]);
                     if(erg[j2] != undefined) pos2.push(element2.index);
                     j2++;
                }
            }
           
            j++;
        }
        j = 0;
        j2 = 0;
    }
   
    var search2 = new Array;
    var result = "";   
   
    var pos2B = pos2;
    var count = pos2.length;
   
    // Array sortiert zurückgeben lassen
    for(var i = count; i >= 0; i--) {
       
        if(pos2[i] != undefined) {
           
            for(var j = count; j >= 0; j--) {        
        
                if (pos2B[j] != undefined) {
                   
                    if (pos2[i] >= pos2B[j]) {
                       
                        var posA = pos2[i];
                        var posB = pos2B[j];
                       
                        pos2[i] = posB;
                        pos2[j] = posA;
                       
                        var ergA = erg2[i];
                        var ergB = erg2[j];
                       
                        erg2[i] = ergB;
                        erg2[j] = ergA;                       
                       
                    }
                }
            }
        }
    }
   
    var erg2html = new Array;
   
    for( var i = 0; i < erg2.length; i++) {
        erg2html[i] = erg2[i];
    }
   
    // Hier geht es um die Textinhalte zwischen den HTML-Tags
   
    var texte = new Array;
   
    for( var i = 0; i < erg2.length; i++) {
        // console.log("i = " + i + " " + erg2[i]);
        html2 = html2.replace(RegExp(erg2[i], "g"), ',');
    }
   
    texte = html2.split(",");
    var textarray = new Array;
    var z = 0;
   
    for( var i = 0; i < texte.length; i++ ) {
        texte[i] = texte[i].trim();
        if(texte[i].length > 0 ) { textarray[z] = texte[i]; z++; }
    }
   
    /*for( var i = 0; i < textarray.length; i++) {
         console.log(textarray[i]);
    }*/
   
    var  erg2B = new Array;
    for( var i = 0; i < erg2.length; i++) {
        erg2B[i] = erg2[i];
    }
   
    // Wo ist der Text positioniert ?
   
    for( var i = 0; i < textarray.length; i++) {
        var n = html.indexOf(textarray[i], 0);
        // console.log(n);       
    }
   
   
    // ALLE TAGS MIT DEN ERSATZMUSTERN ERSETZEN
   
    for( var i = 0; i < search.length; i++) {
        for( var j = 0; j < erg2.length; j++ ) {
            if( ( erg2[j].replace(search[i][1], search[i][3]) != undefined ))
                 erg2[j] = erg2[j].replace(search[i][1], search[i][3]) ;
            if( ( erg2[j].replace(search[i][2], search[i][4]) != undefined ))
                 erg2[j] = erg2[j].replace(search[i][2], search[i][4]);
        }
    }
    // DIE ATTRIBUTE EINFÜGEN   
   
    for(var i = 0; i < erg2.length; i++) {
       
        if((wert = erg2B[i].match(/(\ {0,10}[\w]{2,50}\=\"[\w\d.:#;]*\")*/g)) != null){
           
            for(var k = 0; k < wert.length; k++) {        
                if( wert[k].length !== 0) { // in dem Wert Array das Attribut finden
                    var value1 = wert[k];   
                    erg2[i] = erg2[i].replace(/\"x1\"/, value1);
                    // console.log(erg2[i]);
                }
            }
       
        }
       
        if((wert = erg2B[i].match(/\"(http[s]?:\/\/\w{2,3}\.[\w\d-]{3,40}\.\w{2,10})?((\/\w{2,30})*)?(\/?\w{1,40}\.\w{2,4})?(\?\w{2,30}\=[\w\d]{1,100}(&amp\;\w{1,30}\=[\w\d]{1,100})?)?\"/g)) != null){
           
            for(var k = 0; k < wert.length; k++) {        
                if( wert[k].length !== 0) { // in dem Wert Array das Attribut finden
                    var value1 = wert[k];   
                    erg2[i] = erg2[i].replace(/\"x\"/, value1);
                    // console.log(erg2[i]);
                }
            }
       
        }
    }
   
    // Die Tags mit den Ersatzmustern wieder in das HTML an die Positionen bringen
    for( var i = 0; i < erg2html.length; i++ ) {
        html = html.replace(erg2html[i], erg2[i]);
    }
   
    // Nachbearbeitung
    html = html.replace(/\[DIV\]/g, "<div>");
    html = html.replace(/\[IMG\ /g, "<img ");
    html = html.replace(/ \"x1\"\]/g, ">");
    html = html.replace(/\[\/DIV\]/g, "</div>");
    html = html.replace(/\[BR\]/g, "<br>");
   
    result = html;
   
    return result;
}
 
Hallo!
Falls du noch Hilfe brauchst: Ich habe das ganze mal ausgeführt - alles in allem sieht es für mich ganz korrekt aus.
Was funktioniert denn bei dir nicht?

LG
Florian
 
Passende Stellenanzeigen aus deiner Region:

Oben