Parameter ersetzen mit RegExp

Y

yuro

Erfahrenes Mitglied
Hallo :)

Und zwar bin ich grad dabei mit JavaScript reguläre Ausdrücke zu testen.

Mein Problem ist folgendes:

Ich besitze 2 Textareas T0 und T1.
in T0 ist ein vorgefertigtes HTML Template mit DUMMY Stellen wie z.B. H1_TITLE, BG_BODY, BG_HEADER, BG_CONTENT
in T1 steht der Ersetzungsparameter: *H1_TITLE: Das ist der Titel, BG_BODY: #000, BG_HEADER: #111 usw.

Ich möchte jetzt mittels regulärer Ausdrücke die Parameter von T1 in T0 ersetzen.
D.h. wenn ich dann auf den Button "Ersetze" drücke, sollen alle Parameter von T1 in T0 ersetzt werden.

Kann mir einer helfen wie ich vorgehen kann****
 
Grundsätzlich wäre erst einmal die Frage zu klären, ob dieser Prozess des Ersetzens nur einmal, oder mehrmals passieren soll. Bei letzterem wäre es nötig, dass Du das rohe Template, also jenes mit den Platzhaltern, irgendwo zwischen speicherst, damit man dann darin später wieder die Platzhalter finden kann.

Ansonsten kannst Du dann über den Quelltext Deines Templates einen Ausdruck nach folgendem Beispiel anwenden:
Javascript: 
placeholders = { "title": "Hallo Welt", "header" : "Europa" };
template = "<h1>{{title}}</h1><h2>{{header}}</h2>";
rendered = template.replace( /\{\{([^\}]+)\}\}/, function ( placeholder, name ) {
  return placeholders[ name ];
});
 
Hallo nochmal,

momentan sieht mein code so aus:
Code: 
JS:

function get_dom_node(id) {
  var o; if (typeof id === 'string') { o = document.getElementById(id); }
if (!!(o && o.nodeType !== 1)) { win.alert('ERR: get_dom_node(' + id + '****?)'); }
return o;
}
function get_dom_str(id) {var o = get_dom_node(id), tn = o.tagName.toLowerCase(), r = "";
if (tn === 'input' || tn === 'textarea') { r = o.value; } else { r = o.innerHTML; }
return r;
}
function set_dom_str(id, str) {var o = get_dom_node(id), tn = o.tagName.toLowerCase();
if (tn === 'input' || tn === 'textarea') {o.value = str; o = get_dom_node(id); o.setAttribute('value', o.value);
} else {o.innerHTML = str;}
}

Code: 
HTML:
...
<a href="javascript:void(0)" onclick="set_dom_str('T0',unescape(get_loc_str('Template-Muster')));">Basis-Template</a>
<textarea id="T0" name="T0" cols="90" rows="12" style="width:99%">
<!doctype html>
<html>
<head>
<title> H1_TEXT </title>
<meta charset="UTF-8">
<meta name="robots" content="noindex" />
<style>
body   { background-color: BG_BODY_COLOR;}
header { background-color: BG_HEADER_COLOR;}
nav    { background-color: BG_NAV_COLOR;}
section { background-color: BG_SECTION_COLOR;}
footer { background-color: BG_FOOTER_COLOR;}
</style>
</head>
<body>
<header><p> HEADER_TEXT </p></header>
<nav>
<ul>
<li><a href="#"> menu 1</a></li>
....
</ul>
</nav>
<section><h1> H1_TEXT </h1>
<pre>
Hier kommt Contenttext hin...
</pre>
</section>

<footer>
<p> &copy; <a href="#">COPYRIGHT</a></p>
</footer>
</body>
</html>
</textarea><br />

....
<a href="javascript:void(0)" onclick="set_dom_str('T1',unescape(get_loc_str('Replace-Muster')));">Ersetze</a>
<textarea id="T1" name="T1" cols="90" rows="12" style="width:99%;">
*H1_TEXT: Titeltext wird hier stehen
*HEADER_TEXT: Ein HTML Basis Template
*BG_BODY_COLOR:   #eee
*BG_HEADER_COLOR: #bbb
*BG_NAV_COLOR:    #aaa 
*BG_SECTION_COLOR:#eee
*BG_FOOTER_COLOR: #baa
</textarea>
...
<input type="submit" value="Erstelle" />
<textarea id="T2" name="T2" cols="90" rows="12"></textarea>

HTML-Muster und Replace-Muster sind voreingestellte Muster.. dh. wenn man in den Textareas änderungen gemacht hat und das standard template haben will klickt man auf den button. dann wird wieder das standardtemplate gezeigt.

wie könnte ich deinen code so integrieren das er die Textareas anspricht.. Da man eigene Änderungen an den Placeholder vornehmen kann. Achja das ersetzen soll mehrmals passieren.. das krieg ich ja beim regulären Ausdruck mit "/g" hin oder?
 
Damit er alle Zeilen ersetzt, musst Du, wie schon richtig erkannt, das /g hinten dran setzen – ich vergesse das ständig. Ansonsten könntest Du wie folgt vorgehen:
Javascript: 
var content = document.getElementById( "T1" ).innerHTML;
var lines = content.split( "\n" ).filter( function ( line ) {
  return ( line.trim() != "" );
});

var key, line, rules = {};

for ( key in lines ) {
  line = lines[ key ].split( ":" ); // Regel anhand des Doppelpunktes trennen
  key  = line[ 0 ].substr( 1 ).trim(); // Sternchen davor entfernen
  rules[ key ] = line.slice( 1 ).join( ":" ); // alles nach dem Doppelpunkt als Inhalt speichern, nichtsichtbare Zeichen davor und dahinter entfernen
}

// und hier weiter wie zuvor
 
danke schonmal für deine super antwort :)

wie kann ich das formular auf validierung prüfen?

Z.B.
Code: 
<form style="display:none;" id='w3c_form' method="post" action="http://validator.w3.org/check" target = "_blank">
 <textarea cols="80" rows="5" name="fragment" id="fragment"></textarea>
</form>

get_obj('w3c_form').submit();
 
Dafür müsste Deine Seite öffentlich zugänglich sein, so dass der W3-Validator auch den Quelltext sieht.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück