0

I have a list of articles with a preview feature which does let the user hover the title of the article to have a brief preview of the content, and the structure is as follows:

<img id="{article_id}" src="" /><a href="/something.html" id="{article_id}" data-original-title="https://website.tld/path/image.jpg some other text here">Name of the Article</a>

I need to dynamically take the link to the image (in this example "https://website.tld/path/image.jpg" ) of each of my article previews to fill the empty "img src", knowing that:

  1. The url of the image is different in each article preview
  2. The {article_id} is different in each article

Here's a more comprehensive jsfiddle: https://jsfiddle.net/znnytLrf/2/

I was thinking about using a regex to isolate the image url which always appears at the top, which can basically be treat as a word in regex, but I'm getting very confused as I spent my last 48 hours on it without any significant progresses.

How can I achieve this using jquery? If not, or too trivial, do you have some alternative ways to accomplish this?

Thank you so much for reading my question.

v3ntus
  • 216
  • 1
  • 13
  • 2
    If you're already using an HTML5 `data-*` attribute, why not use more. Have a separate one for the URL and a separate one for the text? Then you can reference each as you need them. – Kurt Nov 10 '17 at 00:10
  • I'm started this question because I've been unable to strip only the img url from the preview feature on my site, or I would have directly pasted it in the src="", so I'm looking for a way to strip the image url and copy it inside the image src. – v3ntus Nov 10 '17 at 00:13
  • 1
    Well, if you really really need to use a regex, there are plenty to be found on SO ([example](https://stackoverflow.com/questions/6038061/regular-expression-to-find-urls-within-a-string)). That first answer would return just the image URL like you want ([example](https://regex101.com/r/RvtDuX/1)). – Kurt Nov 10 '17 at 00:16
  • Thanks, but in the text there might be some other urls, and that regex would match other urls. – v3ntus Nov 10 '17 at 00:19
  • if the url is always at the start syou can use a regex like `$(.*)\s` – Sysix Nov 10 '17 at 00:21
  • If the image URL is always the first URL, you could work with that still. If not, are there other image URLs in that string? If there's only a single image URL, and you know what the file types would be, you could change the regex to handle that. – Kurt Nov 10 '17 at 00:21
  • Thank you for your kind and prompt reply. Assuming I want to proceed with RegEx, how can I grab the url dynamically from each article and place it in each img tag? They both have the {article_id} in my html template, and javascript can't handle html variables, right? Thanks again. – v3ntus Nov 10 '17 at 00:25
  • haave you already jquery code? – Sysix Nov 10 '17 at 01:13
  • No, I don't have it yet – v3ntus Nov 10 '17 at 10:14

1 Answers1

1

You use the {article_id} multipe times as id for your elements like id="article232".

If you mean by "the image url which always appears at the top" that the image url is always at the beginning of the string, you could use a regex like (?=^https?)(.+?)\s to take the characters until you encounter a whitespace.

Then in your jQuery, a possible option would be to:

  • find all the anchors and loop them
  • grab the data-original-title attribute and use exec to get the value that you are looking for
  • then get the previous image element and set it's src attribute with the value that you have found

For example:

$(document).ready(function () {
    $('div p a').each(function () {
        var myRegexp = /(?=^https?)(.+?)\s/g;
        var match = myRegexp.exec($(this).attr("data-original-title"));
        if (match && match[1]) {
            $(this).prev("img").attr("src", match[1]);
        }
    });
});

Fiddle

The fourth bird
  • 154,723
  • 16
  • 55
  • 70
  • Thank you, it works great in the jsFiddle, but on my live site it's not working, for some reasons. Any ideas? You can find a working fiddle here: https://jsfiddle.net/dtwx8o7u/1/ and the live page is here: https://sbenny.com/forums/viewforum.php?f=12&sk=t&sd=d&start=20 – v3ntus Nov 10 '17 at 17:46
  • You're a genius :) Thank you so much – v3ntus Nov 10 '17 at 18:29
  • I applied your changes with some quick-dirty css edits as you can see here: https://sbenny.com/forums/viewforum.php?f=12&sk=t&sd=d&start=20 any ways to make the regex only match the first word which starts with "http|https"? There are some rare occurrences where the image url isn't at the top, but after some words, thanks again. After this I'll mark your answer as the accepted :) I'm very grateful for your help! – v3ntus Nov 10 '17 at 18:44
  • I've updated the javascript to only match the first word which starts with "http:https". [Demo](https://regex101.com/r/G1oUBf/1) – The fourth bird Nov 10 '17 at 18:55
  • Thank you again, you're very very kind and ready to help. Kudos! – v3ntus Nov 10 '17 at 19:10