Unterstützung bei Beispielprojekt

[Andre1985]

Hallo zusammen,
ich würde gerne mit Javascript + AngularJS eine Idee umsetzen und brauche nun eure Hilfe da ich trotz Recherche nicht weiß wie ich meine Idee am Besten umsetzen soll.

Also die Idee ist die folgende:

In eine Textarea möchte ich einen Text schreiben in dem manche Wörter bestehend aus einer Zahl und einem Artikel bestehen. Die Wörter werden auf bestimmte Art und Weise gekennzeichnet.

Bsp:

Schneiden Sie nun **3 Kreise** aus.

Während der Text hinzugefügt wird sollen schon während des Schreibens die Wörter erkannt und gesondert in eine Liste eingetragen werden.

Sobald der Text fertig ist und gesichert ist wird dieser ohne die ** anzeigt. Ebenfalls wird in einem gesonderten Abschnitt eine Liste mit allen Wörter und Stückzahl gezeigt die vorher mit den ** umgeben waren.

Der Text hat nun folgende Funktion. Der Text wurde für eine bestimmte Stückzahl geschrieben. In der Textansicht hat man nun eine Möglichkeit die Stückzahl zu erhöhen (z.B. über zwei Buttons).

Bsp:

Stückzahl: 1 => 3 Kreise --- Stückzahl: 2 ==> 6 Kreise usw.

Alle Angaben sollen entsprechend erhöht werden.

Ich hoffe hier habt ein paar Ideen wie ich Übungsprojekt umsetzen kann.

 

[Andre1985]

Also ich bin dann nun mal auf eine Markup Language gestoßen,die mir bei meinem Projekt behilflich sein könnte. Und zwar heisst diese RezeptML (RecipeML - Format for Online Recipes).

Ich würde nun diese nun für meinen Zweck ein bisschen abwandeln. Dann sieht das ganze so aus:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE recipeml PUBLIC "-//FormatData//DTD RecipeML 0.5//EN"
  "http://www.formatdata.com/recipeml/recipeml.dtd">
<?xml-stylesheet href="dessert1.css" type="text/css"?>
<recipeml version="0.5">
  <recipe>
    <ingredients>
    </ingredients>
    <directions>
      <step>Zerschlage <ing>
        <amt><qty>3</qty><unit>Stk.</unit></amt>
        <item>Eier</item></ing>
        und
        <ing>
        <amt><qty>4</qty><unit>Löffel</unit></amt>
        <item>Zucker</item></ing> in eine Schüssel</step>

      
    </directions>
  </recipe>
</recipeml>

Nun muss ich das ganze irgendwie so auslesen das ich daraus wieder einzelne Bestandteile mache. Das habe ich wie folgt versucht:

$.ajax({
	type: "GET",
	url: "recipeML.xml",
	dataType: "xml",
	success: function(xml) {
		$(xml).find('recipe').each(function() {
			var steps = $(this).find('step')
			console.log("==>",$(steps).clone().children().replaceWith(function(){}).end().text())
			$(steps).find('ing').each(function() {
				var amount = $(this).find('amt');
				var qty = $(amount).find('qty').text();
				var unit = $(amount).find('unit').text();
				console.log("Recipe",qty,unit);

			})

		})
	}
});

Somit habe ich nun den Text ohne die internen Tags zu sehen und die einzelnen Bestandteile. Nun weiß ich nicht genau wie ich das am Besten wieder zusammenpuzzlen kann so das ich das nachher wieder einen vollständigen Satz anzeigen kann und Bestandteile wie die Zahlen trotzdem noch dynamisch funktionieren.

Hat vielleicht jemand eine Idee wie ich nun weiterkomme? Mir fehlt leider ein bisschen die Handhabung in der Verarbeitung von XML-Dateien.

Danke

 

[kkapsner]

XSLT könnte eine Möglichkeit sein.