01_grundlagen/unterricht/tag07/12_str-replace-all.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>String.replace(searchValue, replaceValue)</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>String.replace(searchValue, replaceValue)</h1>
+        <p>
+          Die <strong>replace()</strong>-Methode gibt eine neue Zeichenkette zurück, in der einige oder alle
+          Übereinstimmungen mit einem <strong>Muster</strong> durch einen Ersatz ausgetauscht wurden. Das
+          <strong>Muster</strong> kann eine Zeichenkette (string) oder eine <code>RegExp</code> sein, als Ersatz dienen
+          eine Zeichenkette oder eine Funktion, welche für jede Übereinstimmung aufgerufen wird.
+        </p>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      const productName = 'Prescription Mug';
+      const productDescription =
+        "Prescription Mug: Coffee Mug which looks like a drug bottle. Your Prescription Mug is a great conversation starter. Great for the caffeine addict in your life — one that doesn't need an intervention. You will love your Prescription Mug.";
+      const newProductName = 'Drug Mug';
+
+      console.log(productDescription.replace(productName, newProductName));
+
+      outputEl.textContent = productDescription.replace(productName, newProductName);
+
+      // str.replace mit RegExp (regulärem Ausdruck)
+      outputEl.textContent = productDescription.replace(/Prescription Mug/g, newProductName);
+
+      // str.replaceAll - seit Juni 2021
+      outputEl.textContent = productDescription.replaceAll(productName, newProductName);
+
+      console.log('I love JS. JS is the best language'.replace(/JS/g, 'TS'));
+      // => 'I love TS. TS is the best language'
+
+      // String Methode - str.replaceAll('searchValue', 'replaceValue')
+      console.log('I love JS. JS is the best language'.replaceAll('JS', 'TS'));
+      // => 'I love TS. TS is the best language'
+    </script>
+  </body>
+</html>

01_grundlagen/unterricht/tag07/13_str-includes.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>String.includes()</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/includes">
+            String.includes()
+          </a>
+        </h1>
+        <p>
+          Die <strong>includes()</strong>-Methode gibt an, ob ein String innerhalb eines anderen Strings gefunden wird
+          und gibt dabei <code>true</code> oder <code>false</code> wieder.
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const productName = 'Prescription Mug';
+      const search = 'Mug';
+
+      console.log(
+        productName
+          .trim() //
+          .toLowerCase()
+          .includes(search.trim().toLowerCase()),
+      ); // => true
+    </script>
+  </body>
+</html>