#include <StringConstants.au3> ; to declare the Constants of StringRegExp
#include <Array.au3> ; UDF needed for _ArrayDisplay and _ArrayConcatenate
Local $sRegex = "(?m)Zwechfreibaum01"
Local $sString = "//++++++++++08++++++++++++++++++++" & @CRLF & _
"" & @CRLF & _
"/+++++++++++ App.jsx ++++++++++++" & @CRLF & _
"import React from "react";" & @CRLF & _
"import PictureListAs05 from "./components/PictureListAs05.jsx";" & @CRLF & _
"import PictureListAs06 from "./components/PictureListAs06.jsx";" & @CRLF & _
"" & @CRLF & _
"export default function App() {" & @CRLF & _
" return (" & @CRLF & _
" <div>" & @CRLF & _
" <h1>AS05 – Bilderliste</h1>" & @CRLF & _
" <div style={{ display: "flex", gap: "2rem" }}>" & @CRLF & _
" <PictureListAs05 grenze={80} farbe1="green" farbe2="red" />" & @CRLF & _
" <PictureListAs06 grenze={100} farbe1="blue" farbe2="orange" />" & @CRLF & _
" </div>" & @CRLF & _
" </div>" & @CRLF & _
" );" & @CRLF & _
"}" & @CRLF & _
"" & @CRLF & _
"" & @CRLF & _
"//+++++++++++++ PictureList05.jsx +++++++++++++++++++++++++" & @CRLF & _
"" & @CRLF & _
"import React from "react";" & @CRLF & _
"import ShowPictureList from "./ShowPictureList.jsx";" & @CRLF & _
"" & @CRLF & _
"const BILDER = [" & @CRLF & _
" { url: "https://picsum.photos/seed/a/400", alt: "Wald", datum: "2025-02-01", zahl: 120 }," & @CRLF & _
" { url: "https://picsum.photos/seed/b/400", alt: "Gebirge", datum: "2025-02-02", zahl: 60 }," & @CRLF & _
" { url: "https://picsum.photos/seed/c/400", alt: "Meer", datum: "2025-02-03", zahl: 200 }," & @CRLF & _
" { url: "https://picsum.photos/seed/d/400", alt: "Stadt", datum: "2025-02-04", zahl: 75 }," & @CRLF & _
" { url: "https://picsum.photos/seed/e/400", alt: "Wüste", datum: "2025-02-05", zahl: 95 }," & @CRLF & _
" { url: "https://picsum.photos/seed/f/400", alt: "Wiese", datum: "2025-02-06", zahl: 50 }," & @CRLF & _
"];" & @CRLF & _
"" & @CRLF & _
"export default function PictureListAs05({ grenze, farbe1, farbe2 }) {" & @CRLF & _
" const GRENZE = grenze;" & @CRLF & _
" const FARBE1 = farbe1;" & @CRLF & _
" const FARBE2 = farbe2;" & @CRLF & _
"" & @CRLF & _
" return (" & @CRLF & _
" <div>" & @CRLF & _
" <ShowPictureList" & @CRLF & _
" bilder={BILDER}" & @CRLF & _
" grenze={GRENZE}" & @CRLF & _
" farbe1={FARBE1}" & @CRLF & _
" farbe2={FARBE2}" & @CRLF & _
" />" & @CRLF & _
" </div>" & @CRLF & _
" );" & @CRLF & _
"}" & @CRLF & _
"" & @CRLF & _
"//++++++++++++++ PictureList06.jsx+++++++++++++++++++++++" & @CRLF & _
"" & @CRLF & _
"import React from "react";" & @CRLF & _
"import ShowPictureList from "./ShowPictureList.jsx";" & @CRLF & _
"" & @CRLF & _
"const BILDER = [" & @CRLF & _
" { url: "https://placebear.com/400/400", alt: "Bär im Wald", datum: "2025-02-01", zahl: 120 }," & @CRLF & _
" { url: "https://placebear.com/401/400", alt: "Bär am Berg", datum: "2025-02-02", zahl: 60 }," & @CRLF & _
" { url: "https://placebear.com/402/400", alt: "Bär am See", datum: "2025-02-03", zahl: 200 }," & @CRLF & _
" { url: "https://placebear.com/403/400", alt: "Bär in der Stadt",datum: "2025-02-04", zahl: 75 }," & @CRLF & _
" { url: "https://placebear.com/404/400", alt: "Bär in der Wüste",datum: "2025-02-05", zahl: 95 }," & @CRLF & _
" { url: "https://placebear.com/405/400", alt: "Bär auf der Wiese",datum: "2025-02-06", zahl: 50 }," & @CRLF & _
"];" & @CRLF & _
"" & @CRLF & _
"export default function PictureListAs06({ grenze, farbe1, farbe2 }) {" & @CRLF & _
" const GRENZE = grenze;" & @CRLF & _
" const FARBE1 = farbe1;" & @CRLF & _
" const FARBE2 = farbe2;" & @CRLF & _
"" & @CRLF & _
" return (" & @CRLF & _
" <div>" & @CRLF & _
" <ShowPictureList" & @CRLF & _
" bilder={BILDER}" & @CRLF & _
" grenze={GRENZE}" & @CRLF & _
" farbe1={FARBE1}" & @CRLF & _
" farbe2={FARBE2}" & @CRLF & _
" />" & @CRLF & _
" </div>" & @CRLF & _
" );" & @CRLF & _
"}" & @CRLF & _
"" & @CRLF & _
"" & @CRLF & _
"//+++++++++++++++++++ PictureList.jsx ++++++++++++++++++++" & @CRLF & _
"" & @CRLF & _
"import React, { useState } from "react";" & @CRLF & _
"" & @CRLF & _
"export default function ShowPictureList({ bilder, grenze, farbe1, farbe2 }) {" & @CRLF & _
" const threshold = Number(grenze) || 0;" & @CRLF & _
"" & @CRLF & _
" const imageArrayIndex = useState(0);" & @CRLF & _
" const currentIndex = imageArrayIndex[0];" & @CRLF & _
" const setCurrentIndex = imageArrayIndex[1];" & @CRLF & _
" const borderColor = bilder[currentIndex].zahl > threshold ? farbe1 : farbe2;" & @CRLF & _
" const currentImage = bilder[currentIndex];" & @CRLF & _
"" & @CRLF & _
" return (" & @CRLF & _
" <>" & @CRLF & _
" <ul>" & @CRLF & _
" return (" & @CRLF & _
" <li key={currentIndex}>" & @CRLF & _
" <img" & @CRLF & _
" src={currentImage.url}" & @CRLF & _
" alt={currentImage.alt}" & @CRLF & _
" width={currentImage.zahl}" & @CRLF & _
" style={{ border: `4px solid ${borderColor}` }}" & @CRLF & _
" />" & @CRLF & _
" <p>{currentImage.alt}</p>" & @CRLF & _
" <small>{currentImage.datum}</small>" & @CRLF & _
" </li>" & @CRLF & _
" );" & @CRLF & _
" </ul>" & @CRLF & _
" <button onClick={() => setCurrentIndex(currentIndex + 1)}>" & @CRLF & _
" Nächstes Bild" & @CRLF & _
" </button>" & @CRLF & _
" <button onClick={() => setCurrentIndex(currentIndex - 1)}>" & @CRLF & _
" Vorheriges Bild" & @CRLF & _
" </button>" & @CRLF & _
" </>" & @CRLF & _
" );" & @CRLF & _
"}" & @CRLF & _
"" & @CRLF & _
"//++++++++++ main.jsx +++++++++++++++++++" & @CRLF & _
"" & @CRLF & _
"import { StrictMode } from 'react'" & @CRLF & _
"import { createRoot } from 'react-dom/client'" & @CRLF & _
"import App from './App.jsx'" & @CRLF & _
"" & @CRLF & _
"createRoot(document.getElementById('root')).render(" & @CRLF & _
" <StrictMode>" & @CRLF & _
" <App />" & @CRLF & _
" </StrictMode>," & @CRLF & _
")" & @CRLF & _
"" & @CRLF & _
"" & @CRLF & _
""
Local $aArray = StringRegExp($sString, $sRegex, $STR_REGEXPARRAYGLOBALFULLMATCH)
Local $aFullArray[0]
For $i = 0 To UBound($aArray) -1
_ArrayConcatenate($aFullArray, $aArray[$i])
Next
$aArray = $aFullArray
; Present the entire match result
_ArrayDisplay($aArray, "Result")
Please keep in mind that these code samples are automatically generated and are not guaranteed to work. If you find any syntax errors, feel free to submit a bug report. For a full regex reference for AutoIt, please visit: https://www.autoitscript.com/autoit3/docs/functions/StringRegExp.htm