Finden Sie src-Attribut mit dem Wert von <img> - tag in einem Javascript-string

Habe ich versucht, das " src " im img-tags in einer javascript-variable, die enthält einen block von HTML-code dynamisch erzeugt/zugewiesen.

ZB:

var post_body = "<div>This is an image <img src='abcd.jpg' /> and this is a paragraph <p>hi there</p> Here we have another image <img src='pqrs.jpg' /></div>"

den Inhalt der post-variable ist nicht vorgegeben und es ist dynamisch, und den HTML-code in es immer Veränderungen. Um die src des Bildes in es, ich habe die folgenden. Aber es muss nicht immer Arbeit für mich.

var firstimg = $(post_body).find("img:first").attr("src");

Ich habe versucht, das erste Bild in einem blog-Beitrag aus dem blog-post, der Inhalt aber dieser funktioniert nicht für einige Beiträge mit Bildern. Wie geht das mit javascript oder jQuery, ohne zu Versagen?

  • Sie befinden sich post_body während deine variable heißt post.
  • Sorry habe ich geändert, die Frage ist text entsprechend. 'post' müssen geändert werden, als "post_body'. Das ist der Grund, warum ich verwendet habe post_body danach durch einen Fehler während der Vorbereitung dieser Frage.
  • Es funktioniert hier: jsfiddle.net/3SLJm. Was ist das Szenario, wo es scheitert?
  • Hast du eine Lösung gefunden dafür?
InformationsquelleAutor TechyTee | 2013-10-06
  1. 7

    Mithilfe von plain JavaScript, dump den HTML-Code in ein temporäres element und entpacken Sie es:

    var div = document.createElement('div');
div.innerHTML = post_body;
var firstImage = div.getElementsByTagName('img')[0]
var imgSrc = firstImage ? firstImage.src : "";
//or, if you want the unresolved src, as it appears in the original HTML:
var rawImgSrc = firstImage ? firstImage.getAttribute("src") : "";
    • Wir können nicht sagen, der string beginnt mit einem div oder ein p-tag. Es ist völlig unberechenbar und nicht mit dieser Antwort.
    • Ähm... wieso spielt es eine Rolle, was die Zeichenfolge beginnt mit? Dieser code funktioniert mit jedem HTML...
    • Als Sie dies sagte, wirkte wie ein Zauber... ich danke Euch so sehr!
    • Dies funktioniert aber zwingt den browser zum download alle Fotos verknüpft, die in der temporären element.
    InformationsquelleAutor Niet the Dark Absol
  2. 2

    Ändern $(post_body) zu $(post)

    Versuchen

    var post = "<div>This is an image <img src='abcd.jpg' /> and this is a paragraph <p>hi there</p> Here we have another image <img src='pqrs.jpg' /></div>";
var firstimg = $(post).find('img:first').attr('src');
    • Sorry habe ich geändert, die Frage ist text entsprechend. 'post' müssen geändert werden, als "post_body'. Das ist der Grund, warum ich verwendet habe post_body danach durch einen Fehler während der Vorbereitung dieser Frage.
    • Der obige code ist für mich fein
    • Das funktioniert nicht bei Zeiten, wegen der Anführungszeichen in der html-string, so dass $(post) gibt einen Fehler aus. Muss einen anderen Weg geben.
    InformationsquelleAutor Tamil Selvan C
  3. 0

    Vielleicht können Sie versuchen, hinzufügen von id zu img tag und dann darauf zugreifen.

    var oImg = document.getElementById('myImg');
var attr = oImg.getAttribute('src');

    Dies ist eine Reine js-Lösung.

    • Bild-tags können nicht vorgegeben werden, Sie werden automatisch aus einer online-Quelle.
    InformationsquelleAutor
Schreibe einen Kommentar