RegEx Verwirrung

[Hansi]

Hallo,

Ok, irgendwie bekomme ich das nicht hin :(

Ich habe Strings, die in Variablen gespeichert werden. Diese Strings sind je nach Ausgangslage anders.

Nun habe ich eine Reihe von Bildern im DOM und möchte dasjenige finden, das alle diese Strings enthält.

Also z.B. soll

let foo = "Birke"
let bar = "Sommer"
let baz = "Archiv"

das Bild mit der URL Archiv/Dateien/IMGs/Birke-im-Sommer.jpg im DOM finden.

Oje mit e, euer Hans

[Der Martin]

Hi,

Ich habe Strings, die in Variablen gespeichert werden. Diese Strings sind je nach Ausgangslage anders.

das ist zu vermuten, sonst wär's trivial. ;-)

Nun habe ich eine Reihe von Bildern im DOM und möchte dasjenige finden, das alle diese Strings enthält.

Du meinst: Dessen URL alle Strings enthält?

Also z.B. soll

let foo = "Birke"
let bar = "Sommer"
let baz = "Archiv"

das Bild mit der URL Archiv/Dateien/IMGs/Birke-im-Sommer.jpg im DOM finden.

Okay. Also nicht einen der gegebenen Strings, sondern tatsächlich alle.

Ich liefere mal ein paar Bauklötze:

• Die Collection document.images (quasi ein Array) enthält die DOM-Elementobjekte aller Bilder (img-Elemente) im Dokument. Die haben eine href-Eigenschaft, die die exakte Bild-URL enthält.
• Mit indexOf() findest du heraus, ob ein String in einem anderen enthalten ist.
• Iteriere über document.images, und innerhalb der Schleife über deine gesuchten Strings (die ich an deiner Stelle auch in einem Array halten würde). Kommt der String im href des gerade betrachteten image-Objekts nicht vor, ist dieses Bild raus aus dem Rennen.

Und RegEx würde ich für diese Aufgabe nicht verwenden.

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Martin,

document.images

Autsch. Stimmt. Das vergesse ich immer wieder.

indexOf()

Hm. Hmmmmm. Siehe mein anderes Posting.

Rolf

[Gunnar Bittersmann]

@@Rolf B

document.images

Autsch. Stimmt. Das vergesse ich immer wieder.

Ich wollte schon auf dein „eins von beidem“ mit „keins von beidem“ antworten, saß aber gerade im Café – äh nein, nicht im, sondern draußen auf der Terrasse – und als ich ausgetrunken hatte, war Der Martin inzwischen schneller.

indexOf()

Hm. Hmmmmm.

Hm, dann müsste man aufwendig die Wörter im Pfad trennen, wozu sich reguläre Ausdrücke wegen ihrer völlig realitätsfernen Vorstellung davon, was word characters sind, auch nicht eignen.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Hansi]

Alles klar, danke Martin!

Werde mir das mit indexOf() ansehen [und mich an dieser Stelle wieder melden wenn sobald ich damit gescheitert bin 😬]

[Rolf B]

Hallo Hansi,

Ok, also du hast 1-N Suchbegriffe (ich nehme an, die Zahl 3 ist nicht fest vorgegeben) und möchtest das DOM nach Bildern durchsuchen, deren URL diese Suchbegriffe enthät.

1. Durchsuchen des DOM nach allen <img> Elementen:

// eins von beiden
const bilder = document.queryElementsByTagName("img");
const bilder = document.querySelectorAll("img");

A-Bär 1: Was ist mit background-image? Die auch?

A-Bär 2: Was ist mit srcset Angaben? Da ist eine Liste von Bildern für unterschiedliche Größen hinterlegt

A-Bär 3: Was ist mit <object> Elementen? Die können auch Bilder einbinden.

Bestimmt gibt's noch mehr, was mir grad... achja. SVG. Da gibt's ein <image> Element. Das auch?

Wenn diese Bärenjagd beendet ist, wird's schon fast einfach. Aber mit einer Regex? Hm. Hmmmmm. Ich dachte an lookahead assertions, denn ich nehme mal an, dass Du die Begriffe in beliebiger Reihenfolge suchen möchtest. Aber da gibt's böse Sonderfälle.

let foo="eins";
let bar="stein";

Soo. Und nun haben wir diese beiden Bilder:

<img src="./einstein/vorlage.jpg">
<img src="./einstein/einsatz.jpg">

Vermutlich soll nur das 2. Bild ein Treffer sein. Oder soll es überhaupt?

Gibt es eine Obergrenze für die Anzahl der Suchbegriffe?

Rolf

[Der Martin]

Hallo Rolf,

// eins von beiden
const bilder = document.queryElementsByTagName("img");
const bilder = document.querySelectorAll("img");

A-Bär 1: Was ist mit background-image? Die auch?

über diesen Bären habe ich auch kurz nachgedacht, und dann nassforsch beschlossen: Nö, wahrscheinlich nicht.

A-Bär 2: Was ist mit srcset Angaben? Da ist eine Liste von Bildern für unterschiedliche Größen hinterlegt

Okay. Guter Einwand.

A-Bär 3: Was ist mit <object> Elementen? Die können auch Bilder einbinden.

Der auch.

Bestimmt gibt's noch mehr, was mir grad... achja. SVG. Da gibt's ein <image> Element. Das auch?

Von der Logik her sollte das mit document.images eigentlich mit abgedeckt sein. Ist es aber vermutlich nicht. :-(

let foo="eins";
let bar="stein";

Soo. Und nun haben wir diese beiden Bilder:

<img src="./einstein/vorlage.jpg">
<img src="./einstein/einsatz.jpg">

Vermutlich soll nur das 2. Bild ein Treffer sein.

Warum das erste nicht? Was du andeutest, geht in Richtung "Find whole words only", aber das habe ich aus der Aufgabenstellung nicht herausgelesen.

Aber das sollte Hansi vielleicht nochmal präzisieren, wenn er mit den bisherigen Anregungen noch nicht ans Ziel kommt.
Und wenn doch, würde mich trotzdem interessieren, wie's geklappt hat.

Gibt es eine Obergrenze für die Anzahl der Suchbegriffe?

Wenn die (wie ich vorgeschlagen habe) auch in einem Array stecken, wäre das egal (außer im Hinblick auf die Rechenzeit).

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Martin,

Warum das erste nicht?

Weil, wenn ich einen Namen suche mit den Komponenten "Eins" und "Stein", diese beiden Komponenten sich nicht überlappen sollten. Denn sonst sind es nicht zwei Komponenten.

Das ist aber was, was Hansi spezifizieren muss.

Rolf