Develop Reference

Fetch and add img attributes to string

I have a string like this.
x = '<div class="sample">
<img src="http://www.example.com/i/java.png">
</div>
<div class="sample_another">
<img src="/i/somedir/python.png">
</div>'
I want to convert to this
x = '<div class="sample">
<img src="http://www.example.com/i/java.png" height="200px" width="100px">
</div>
<div class="sample_another">
<img src="/i/somedir/python.png" width="150px" height="150px">
</div>'
input string will be a html doc. for all the images in the doc, i want to add the height and width property. and to get the height and width property i have to use something like this
var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src = 'http://www.example.com/intl/logo.gif';
p.s. i tried using this solution but the problem i face is that the string might have the script tag and DOM parses it as a closing script tag. I cant find much for regex either. So is there any other way to obtain this result ?
Thanks.

If you can remove scripts than go with this code:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
var string ="<script type"text/javascript"></script><img alt=''
src='http://api.com/images/UID' /><br/>Some plain text<br/><a
href='http://www.google.com'>http://www.google.com</a>";
var elem= document.createElement("div");
$(string).find('script').remove();
elem.innerHTML = string;
var images = elem.getElementsByTagName("img");
for(i=0; i<images.length; i++){
images[i].width = "150";
images[i].height = "250";
}
string = elem.innerHTML;
Problem you are facing with is that it turns out that HTML5 does not allow script tags to be dynamically added using the innerHTML property. So you will need to add them dynamically on some other way.
This is some code that might help you:
var my_awesome_script = document.createElement('script');
my_awesome_script.setAttribute('src','http://example.com/site.js');
document.head.appendChild(my_awesome_script);

accessing nextElementSibling in HTML

I have written a lightbox script in plain JS:
HTML:
<img onclick="pLightbox(this)" src="MyPhoto.jpg" />
JS:
function pLightbox(objPhoto){
var path=objPhoto.src;
HTMLtext = '<img src="' + path + '">';
containerDiv.innerHTML = HTMLtext;
}
(code abbreviated for clarity)
This works fine. Now I'm trying to access the next sibling within the DIV. I have tried:
HTMLtext += '<img src="images/Next.png" onclick="pLightbox(' + objPhoto.nextElementSibling + ')">';
This doesn't work - Tried several different variations (nextElementSibling.src, etc.) , but nothing works.
How do I access the next sibling from an HTML string?

Eh, no. Do not concatenate DOM elements with strings. Do not use event handlers. Especially, do not use event handler content attributes.
This is the proper way. No events in HTML. No nasty string manipulation. No HTML injection vulnerabilities.
document.querySelector('img').addEventListener('click', pLightbox);
function pLightbox() {
containerDiv.innerHTML = "";
var img = document.createElement('img');
img.src = this.src;
img.addEventListener('click', pLightbox.bind(this.nextElementSibling));
containerDiv.appendChild(img);
}
<img src="//stackoverflow.com/favicon.ico" />
<img src="//scifi.stackexchange.com/favicon.ico" />
<img src="//superuser.com/favicon.ico" />
<img src="//crossvalidated.com/favicon.ico" />
<div id="containerDiv">Click the first image. Then keep clicking the new image</div>

How to scrape text in a href by Beautiful Soup?

I have a href in format <a href="javascript:ShowImg('../UploadFile/Images/c/1/B_27902.jpg');">, and I want to get the url with '../UploadFile/Images/c/1/B_27902.jpg'. I used a stupid way to get it:( I want to know if there is a more easier way to get it.
url = '<a href="javascript:ShowImg('../UploadFile/Images/c/1/B_27902.jpg');">'
html = url.get('href')
html = html.replace('javascript:ShowImg(', '').replace(');', '')
The original tag as below:
<a href="javascript:ShowImg('../UploadFile/Images/c/1/B_27902.jpg');">
<img height="110" onerror="this.src='../UploadFile/Images/no_pic_big.jpg';"
src="../UploadFile/Images/c/1/S_27902.jpg" width="170"/>
</a>

BeautifulSoup can apply a compiled regular expression pattern to attribute values when searching for elements. You then can use the same pattern to extract the desired part of it:
import re
from bs4 import BeautifulSoup
data = """
<a href="javascript:ShowImg('../UploadFile/Images/c/1/B_27902.jpg');">
<img height="110" onerror="this.src='../UploadFile/Images/no_pic_big.jpg';"
src="../UploadFile/Images/c/1/S_27902.jpg" width="170"/>
</a>
"""
soup = BeautifulSoup(data, "html.parser")
pattern = re.compile(r"javascript:ShowImg\('(.*?)'\);")
href = soup.find('a', href=pattern)["href"]
link = pattern.search(href).group(1)
print(link) # prints ../UploadFile/Images/c/1/B_27902.jpg

Javascript get img src and show link in a div

I'm just a beginner in javascript, I'm trying to make javascript take image src from specific image with a specific class and place the src into div.
<div class="result"></div>
<div class="ilist">
<img src="images/dog.jpg" class="thumbnail">
<img src="images/bird.jpg" class="thumbnail">
<img src="images/cat.jpg" class="selected__img"> // THIS IS THE DESIRED IMAGE
</div>
What i want to show in the result div is this = images/cat.jpg
but instead it doesn't display anything or some weird stuff...
javascript right now
var simg = document.getElementsByClassName('selected__img').src;
document.getElementsByClassName("result").innerHTML = simg;
Sorry for being such a newbie but I'm trying to learn..

The getElementsByClassName() method returns a collection of all elements in the document with the specified class name, as a NodeList object.
The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.
Try this:
<script>
var simg = document.getElementsByClassName('selected__img');
var src=simg[0].src;
var resutlObj=document.getElementsByClassName("result")[0]
resutlObj.innerHTML = src;
</script>
Full code snippet:
var simg = document.getElementsByClassName('selected__img');
var src = simg[0].src;
var resutlObj = document.getElementsByClassName("result")[0]
resutlObj.innerHTML = src;
<div class="result"></div>
<div class="ilist">
<img src="https://loremflickr.com/100/100?random=1" class="thumbnail">
<img src="https://loremflickr.com/100/100?random=2" class="thumbnail">
<img src="https://loremflickr.com/200/200?random=3" class="selected__img"> // THIS IS THE DESIRED IMAGE
</div>

getElementsByClassName is a NodeList collection. So you need to take individual nodes with [0]:
var simg = document.getElementsByClassName('selected__img')[0].src;
document.getElementsByClassName("result")[0].innerHTML = simg;
In this specifc case it's more convenient to use querySelector metod which returns one element:
var simg = document.querySelector('.selected__img').src;
document.querySelector(".result").innerHTML = simg;
or since you are using jQuery:
var simg = $('.selected__img').attr('src');
$(".result").text(simg);

$(document).ready(function() {
$('img').hover(function(){
$('.result').html($(this).attr('src'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="result">Image path</div>
<div class="ilist">
<img src="images/dog.jpg" class="thumbnail">
<img src="images/bird.jpg" class="thumbnail">
<img src="images/cat.jpg" class="selected__img"> // THIS IS THE DESIRED IMAGE
</div>

You need to iterate over elements, since you have one selected__img you can use 0 like below:
var simg = document.getElementsByClassName('selected__img')[0].src;
document.getElementsByClassName("result").innerHTML = simg;

javascript regex - replace each match of given expression with different string

I have a string contaning some html markup, like this:
var html = "<div>
<img src="http://test.com/image1.png" />
<h1>SOME TEXT</h1>
<img src="http://text.com/image2.jpg" />
</div>";
i want to replace all urls inside src="..."
It is ok if i do html = html.replace(/[^-]src\=["|'](.*?)['|"]/g, "SOME_URL");
then all src="..." become src="SOME_URL"
But now i want to replace each match with a different string, taken from an array, but i'm having trouble with this.
I think i have to use a function for the replacement, but not sure how to implement it.
Something like:
html = html.replace(/[^-]src\=["|'](.*?)['|"]/g, function ($0, $1){ //what do i do here??? });
So, if i have:
var arr = [];
arr['http://test.com/image1.jpg']='file1';
arr['http://test.com/test.jpg']='file3';
the html string from above will become:
"<div>
<img src="file1" />
<h1>SOME TEXT</h1>
<img src="http://text.com/image2.jpg" />
</div>"
Note that 'http://text.com/image2.jpg' is not a key of the array, so it does not gets replaced.
Any help appreciated, thank you in advance.

var html = '<div><img src="http://test.com/image1.jpg" />...</div>';
var arr = {
'http://test.com/image1.jpg' : 'file1',
'http://test.com/test.jpg' : 'file3'
}
html = html.replace(/[^-]src\=["|'](.*?)['|"]/g, function ($0, $1){
return ' src="' + (arr[$1] || $1) + '"';
});
console.log(html) returns
"<div><img src="file1" /><h1>SOME TEXT</h1><img src="http://text.com/image2.jpg" /></div>"

I'd forget about regex in this case, if you have an array containing all urls and their individual replacements in an object, why not do something like:
for (i in replaceObj)
{
html = html.split(i).join(replaceObj[i]);
}
tried it in console:
html = '<div><img src="imgs/img.jpg"/></div>';
replaceObj = {};
replaceObj['imgs/img.jpg'] = 'file';
for(i in test){html = html.split(i).join(replaceObj[i])};
output: <div><img src="file"/></div>. You could split on src="'+i'"' and concat. the same when joining to be on the safe side... but bottom line: keep it simple, whenever you can