Javacript. Anfrage, ob Eingabe eine Bild-URL ist?

Hallo!

Ich habe auf folgender Seite (http://penner-items.de.tl/Fake_Award-Editor.htm) drei Eingabefelder (Inputs), wo bei einem eine Bild-URL eingegeben werden muss. Wie kann ich mit Javascript überprüfen, ob es sich bei der eingabe wirklich um eine bild-url und nicht nur irgendeinen text handelt?
______________

Du kannst den eigegebenen Text von hintern her bis zum Punkt abschneiden und dann überprüfen ob dieser Teil jpg, jpeg, png,... entspricht.
Außerdem kannst du prüfen ob der Text mit http:// beginnt, ob er Leerzeichen enthält, ob sich der Teil vor dem ersten / nach dem Muster http:// ... .TLD zusammensetzt usw.
______________
- Signatur vom Mod Team angepasst -
Bitte keine Werbung für fremde Projekte

=> Das ist sehr schade. Ich habe mich hier im Forum über viele Jahre engagiert und einfach meine Signatur zu verändern zeugt von mangelnder Wertschätzung für meine Beiträge, die einzig den Nutzern des Homepage-Baukastens zugute kamen. Spätestens mit der Reduzierug auf max. 10 Unterseiten* sind die guten Zeiten des Baukastens ohnehin vorbei und die einst große Gremeinschaft im Forum hat sich längst aufgelöst. Nun bin ich hier offenbar auch nicht länger erwünscht. Bleibt mir nur lebewohl zu sagen, es waren schöne 14 Jahre und der Baukasten hat mir immer viel Spass gemacht - machts gut und eventuell trifft man sich ja doch nochmal an anderer Stelle im Internet. (07.06.2020)
* mittlerweile sogar nur noch 5

ja, so dachte ich mir das ja auch ...aber wie geht das??
______________

Hallo,

du kannst entweder die Methode indexOf verwenden und alles einzeln prüfen, oder was effektiver und auch schöner ist, du verwendest reguläre Ausdrücke mit der Methode search. Dafür stellt das window Objekt das RegExp Objekt zur Verfügung.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering

Ja, und wie geht das? Also search() hatte ich auch schon in Betracht gezogen, aber weiß nicht, wie genau ich die abfrage mit document.getElementById('BILD') machen muss!
______________

Was verstehst du denn nicht?

Einfach mit dem Punktoperator über das String Objekt die Methode aufrufen und ihr den regulären Ausdruck übergeben. Die Methode gibt -1 zurück, wenn der Ausdruck nicht passt und ansonsten die Stelle des ersten Treffers. Eigentlich Kinderleicht...
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering

du redest immer von regulärer Ausdruck und Methoden...ich hab keine Ahnung von sowas, deswegen frag ich doch
______________

Das Problem daran ist, dass du dich hier im Supportbereich befindest. Wenn dir jemand etwas erstellen soll, wovon ich aufgrund deiner Ahnungslosigkeit ausgehe, solltest du bei ich suche fragen. Hier wird dir keiner in ein paar Sätzen Javascript beibringen können.

Methoden sind Funktionen, die ein Objekt bereit stellt und das Verhalten der Objekte charakterisieren.

Ein regulärer Ausdruck ist ein syntaktisches Konstrukt, das eine Sprache bezeichnet.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering

Okay...wenn es in 'ICh Suche' soll, dann verschieb es doch bitte dahin und helf mir
______________

Nö, ich habe die Hoffnung noch nicht aufgegeben, dass du vielleicht doch noch etwas Eigeninitiative zeigst.

Mach ich doch schon die ganze Zeit.

Also gut, dann bin ich mal nicht so. Da der Baukasten ein paar Eigenheiten hat, die du für reguläre Ausdrücke wissen musst, zeige ich dir jetzt mal das grobe Prinzip. Um alle eventualitäten und besonderheiten, der einzelnen Labels darfst du dich aber selbst kümmern. Wegen der bereits erwähnten Baukasten Eigenart, definieren wir den regulären Ausdruck, als String:

Vor unserem Ausdruck darf nichts stehen:

Als erstes folgt dann in jeder URL das Schema. Ich denke in dem Fall dürfte http und https ausreichen. Also muss die Eingabe mit http oder mit https beginnen:

Danach folgt ein Doppelpunkt:

gefolgt von 2 Slashs. Da der Slash aber ein reserviertes Zeichen ist, muss er escapte werden. Dafür wird der Backslash verwendet. Hier kommt jetzt die Baukasteneigenart ins Spiel. Aus mir unerklärlichen Gründen werden die Backslashes Serverseitig entfernt. Daher müssen wir etwas tricksen und ihn dynamisch erzeugen. Javscript bietet die Funktion unescape. Diese funktion wandelt Hexadezimalwerte von Zeichen in das zugehörige ASCII Zeichen um. Der Hexadezimalwert für den Backslash ist 5C (5 * 16^1 + 12 * 16^0 = 92):

Jetzt kann ein www. kommen, muss aber nicht. Was aber auf jedenfall folgt ist eine Zeichenkette. Wie bereits gesagt, mache ich es einfach. Wenn du es exakt machen möchtest, kannst du mal google fragen, welche Zeichen erlaubt sind (Das sind mittlerweile nämlich einige und die sind auch noch vom Label abhängig) und den Ausdruck dadurch genau definieren. Also sagen wir, es muss einfach eine Zeichenkette folgen, die mindestens 1 Zeichen lang ist:

Nach dieser Zeichenkette muss mindestens einmal die Zeichenfolge Punkt Zeichenkette Slash für das Label und den url-path folgen:

Nach dieser Folge folgt für den Namen des Bildes auf dem Server wieder eine Zeichenkette, die mit dem Punkt abgeschlossen wird:

Als letztes folgt normalerweise das Dateiformat (Ich beschränke es mal auf jpg, gif, png und bmp), danach darf nichts mehr folgen. Was mir jetzt aber gerade einfällt, es gibt auch URLs, bei denen du nicht erkennen kannst, ob es sich um ein Bild handelt! Hier aber mal der fertige grobe reguläre Ausdruck:

Wenn ich mich nicht vertippt und/oder etwas vergessen habe, müsste das so klappen. Wie aber gesagt, es gibt auch URLs, bei denen du nicht erkennst ob es sich um ein Bild handelt. Hier könntest du ein Image Objekt anlegen und prüfen, ob dieses richtig geladen wird.

Anwenden tut man reguläre Ausdrücke wie bereits gesagt, auf String Objekte mit der Methode search. Search gibt -1 zurück, wenn der Test negativ war und ansonsten die Stelle, des ersten treffers. Bsp:

______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering

Okay, jetzt hab ich es zumindest verstanden...leider klappt es nicht...

EDIT: Soll heißen: auch Adressen, die kein bild enthalten werden als richtig erkannt...Beispiel:

http://static.pennergame.de/img/pv4/icons/awards/1.gif <- Adresse vom richtigen Bild...wird als richtig erkannt

http://static.pennergame.de/img/pv4/awards/1.gif <- '/icons' weggelassen...trotzdem als richtig erkannt

http://static.pennergame.de/img/awards/1.gif <- '/pv4' weggelassen, auch als Bild erkannt

http://static.pennergame.de/awards/1.gif <- '/img' weggelassen, auch als Bild erkannt

http://static.pennergame.de/1.gif '/awards' weggelassen, auch als Bild erkannt

http://static.pennergame.de1.gif <- '/' weggelassen, erst jetzt als Falsch erkannt!


Hab das ganze jetzt wie folgt eingebaut:

______________

Natürlich werden die URLs als richtig erkannt, sie sind ja auch richtig.
Du kannst damit nur prüfen, ob die URLs Syntaktisch korrekt sind und das sind sie! Woher willst du den anhand der URL wissen, ob die URL auch tatsächlich existiert?

Deine Frage ist damit beantwortet, die lautete nämlich:

...und nicht, wie kann ich prüfen, ob die URL existiert? Die Antwort auf diese Frage, habe ich dir in meinem letzten Beitrag übrigens auch gegeben:

Gleiches gilt, wenn du prüfen willst, ob die URL auch existiert.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering

Ah, okay...und wie meintest du das mit

Habe mal danach recherchiert und irgendwie immer nur solche for-Schleifen gefunden die mit onLoad() agiert haben und darauf gewartet haben, bis eine komplette Seite fertig geladen ist...
______________

Was willst du denn mit irgendwelchen Schleifen?

Erzeuge das Image Objekt:

Gebe dem Source Attribut des Objekts die URL und setze den onload- und den onerror event, des Image Objekts. Bei den beiden events führst du dann jeweils eine andere Funktion aus.

Falls onerror ausgeführt wird, ist beim Laden wie der Name schon sagt, ein Fehler aufgetretten. Bei onload war das Laden erfolgreich.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering

Okay, so ist es jetzt, aber wo liegt der fehler?

______________