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.
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}(&\;\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}(&\;\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}(&\;\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}(&\;\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;
}
