Unfertige HTML Ersetzungsfunktion

_Andi84

_Andi84

Mitglied
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;
}
 
olfibits

olfibits

Aktives Mitglied
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
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
PhilipMJNE Hilfe bei HTML und CSS! HTML / CSS 12
PhilipMJNE CSS in HTML via Link einbinden PROBLEM ! HTML / CSS 22
VPChief HTML Bei bestimmter eingabe in textfeld neu HTML Seite öffnen HTML / CSS 6
B Bilder aus Server in HTML anzeigen HTML / CSS 5
B Zeit für Doppelklick messen (HTML/JS) HTML / CSS 3
M Javascript: HTML-Datei erstellen und auf Festplatte speichern HTML / CSS 8
M HTML-Code einer fremden Webseite auslesen - geht das mit Javascript HTML / CSS 19
U Html Funktion Java Funktion zuweisen HTML / CSS 2
D Daten von einer HTML Datei auf eine andere HTML Datei bekommen HTML / CSS 2
E HTML DOM HTML / CSS 1
A Nur bestimmte Zeichen in HTML input Feld erlauben (JavaScript) HTML / CSS 11
Dimax HTML bei button click Formular an php senden aber andere seite öffnnen HTML / CSS 23
Dimax Mehrere css Dateien in eine HTML Seite einbinden HTML / CSS 3
Dimax Variable vom Get Request in HTML abfangen HTML / CSS 9
A Mit Modal (Bootstrap) eine html Seite anzeigen, die von id abhängig ist HTML / CSS 0
D HTML- Formulare an den Server senden HTML / CSS 5
S Quiz mit HTML/PHP erstellen HTML / CSS 3
W Keylistener Applet in Html HTML / CSS 9
S HTML Datei per E-Mail versenden HTML / CSS 3
K Html Programmieroberfläche einbinden (java) HTML / CSS 1
T [JS] Extrahiere werte aus HTML Tabelle (td) aber nur bestimmten Teil HTML / CSS 5
K Verständnis von HTML/CSS & JScript HTML / CSS 2
Pataraca mit HTML auf php zugreifen HTML / CSS 1
I zugehörige HTML bzw. PHP Datei in den Entwicklertools finden HTML / CSS 3
D Hilfe bei erster Html-Aufgabe (Rahmen) HTML / CSS 6
KaffeeFan HTML Text rotieren HTML / CSS 2
K How to create Html tables for java parser objects? HTML / CSS 2
EisKaffee HTML interner Link soll neues Fenster aufmachen HTML / CSS 2
H javascript - html Beispiel LQH, verwirklichung HTML / CSS 1
I Menü, Header, Content ausgliedern aus einer HTML Seite HTML / CSS 2
G HTMl Tabellen-Zelle zeilen oder Höhe begrenzen HTML / CSS 1
O HTML/CSS doppeltes DropDown Menu HTML / CSS 1

Ähnliche Java Themen

Anzeige

Neue Themen


Oben