Develop Reference

Replace html element out of JavaScript string

I am working with a package that sends a string (html content) to my webhook that I need to replace with other text:
const x = `
<div dir="ltr">fifi<div><br></div>
<div><br></div>
<div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEcFPoHAAo1e7KR+MHvhg6PHwIjZvWTVNOvvH2+3kP1bO7mhPCuKXYKK5MAwrACJEACJOAeAhTeFN7umWlshQRIgARIgARIgARsToDCm8Lb5l8BDp8ESIAESIAESIAE3EOAwpvC2z0zja2QAAmQAAmQAAmQgM0JUHhTeNv8K8DhkwAJkAAJkAAJkIB7CFB4U3i7Z6axFRIgARIgARIgARKwOQEKbwpvm38FOHwSIAESIAESIAEScA8BCm8Kb/fMNLZCAiRAAiRAAiRAAjYnQOFN4W3zrwCHTwIkQAIkQAIkQALuIUDhTeHtnpnGVkiABEiABEiABEjA5gQovCm8bf4V4PBJgARIgARIgARIwD0EKLwpvN0z09gK9pWbcSvA01WdYa8nwCBAgQINCvBPpySO3L7603FKngLXj3hjr0GggQIECAwAot0J8Ca396r6WLUvAWvEvXlP4IECBAgACBjEBfCq196b1kPq7iDwvegnfxotIhAQIECBAgsHQCK2KYXRFf89J9Osv+rE4F7/8HxI8dO1ueh3UAAAAASUVORK5CYII=" alt="Screen Shot 2022-10-07 at 4.36.08 PM.png" width="335" height="483"><br></div>
</div>
`
The img is a blob file and is actually much longer, just shortened it for this. I figure the easiest way to find the part of the string is by the alt tag as I will have that string available to me. I am unsure how to proceed to have the entirety of <img .....> replaced with variable y. Any ideas?

You can try to replace <img ...> by regex
const x = `
<div dir="ltr">fifi<div><br></div>
<div><br></div>
<div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEcFPoHAAo1e7KR+MHvhg6PHwIjZvWTVNOvvH2+3kP1bO7mhPCuKXYKK5MAwrACJEACJOAeAhTeFN7umWlshQRIgARIgARIgARsToDCm8Lb5l8BDp8ESIAESIAESIAE3EOAwpvC2z0zja2QAAmQAAmQAAmQgM0JUHhTeNv8K8DhkwAJkAAJkAAJkIB7CFB4U3i7Z6axFRIgARIgARIgARKwOQEKbwpvm38FOHwSIAESIAESIAEScA8BCm8Kb/fMNLZCAiRAAiRAAiRAAjYnQOFN4W3zrwCHTwIkQAIkQAIkQALuIUDhTeHtnpnGVkiABEiABEiABEjA5gQovCm8bf4V4PBJgARIgARIgARIwD0EKLwpvN0z09gK9pWbcSvA01WdYa8nwCBAgQINCvBPpySO3L7603FKngLXj3hjr0GggQIECAwAot0J8Ca396r6WLUvAWvEvXlP4IECBAgACBjEBfCq196b1kPq7iDwvegnfxotIhAQIECBAgsHQCK2KYXRFf89J9Osv+rE4F7/8HxI8dO1ueh3UAAAAASUVORK5CYII=" alt="Screen Shot 2022-10-07 at 4.36.08 PM.png" width="335" height="483"><br></div>
</div>
`
const regex = /<img[^>]*>/g
const y = "Your variable"
const output = x.replaceAll(regex, y)
//if you want to replace for the first occurrence only
//you can use `replace` instead
//const output = x.replace(regex, y)
console.log(output)

Edit src of img with codemirror

I'm trying to update the src attribute of <img> tags so that the user can insert images to the code from our asset manager.
Consider this HTML:
<div>
<img src="some_image_already_defined.jpg" alt="Some Image" />
</div>
So if the user places the cursor to any position inside the img tag, I'll replace "some_image_already_defined.jpg" with the new image user selected.
The simplified version of code is smt. like that:
var image_path = 'some_new_image.jpg';
$('#insert-image').click(function() {
var cur = codeMirrorHtml.getCursor();
var token = codeMirrorHtml.getTokenAt(cur);
var inner = CodeMirror.innerMode(codeMirrorHtml.getMode(), token.state);
if (inner.state.tagName == 'img') {
var srcPosition = findTheSrcAttributePosition(); // How do I do this?
codeMirrorHtml.setSelection(srcPosition.anchor, srcPosition.head);
codeMirrorHtml.replaceSelection('src="' + image_path + '"');
}
});
So I want to traverse the token somehow but I couldn't find a way to do it.

Step 1
Get the current line number with getCursor:
var line = editor.getCursor().line;
Step 2
Get the contents of the current line using getLine:
var lineTxt = editor.getLine(line);
Step 3
Find the <img tag. This is just a string search and it's up to you:
var imgTagStartIdx = lineTxt.indexOf("<img");

Why am I getting the browser URL when I try to get the img src?

I'm doing a check to see if an image has got a url source.
// HTML (short version)
<div id="image-drop-box">
<img class="promo-img hidden" title="Promo image" src="">
</div>
//JS
var promoImg = $('#image-drop-box .promo-img');
var missingImg = promoImg.prop('src').length == 0 ? true : false;
console.log(promoImg.prop('src').length);
console.log(promoImg.prop('src'));
All tough the img source is empty, it keeps returning the browser URL. Why is that?
See the jsFiddle here.

You're looking at the src property, which is resolved relative to the document; a blank relative URL resolves to the same URL as the document it's in. If you want to know if the attribute is blank, look at the attribute with attr:
var missingImg = !promoImg.attr('src'); // A blank string is falsey, so !"" is true
console.log("attr: " + promoImg.attr('src'));
Updated Fiddle

The relative URL "" is resolved as "the same as the URL it is relative to", i.e. the current document.

<div id="image-drop-box">
<img class="promo-img hidden" title="Promo image" src="">
</div>
//JS
var promoImg = $('#image-drop-box .promo-img');
var missingImg = promoImg.attr('src').length == 0 ? true : false;
console.log(promoImg.attr('src').length);
console.log(promoImg.attr('src'));
UPDATED FIDDLE

by using .prop('src') it returns the value but with the full domain path
so use this code it will work
var promoImg = $('#image-drop-box .promo-img');
var missingImg = promoImg.attr('src') ? true : false;
console.log(missingImg);
it will work

It's because you get relative url. If you have <img src="images/a.png">, that means you have images dir under where your file is located. Now that you specify it as empty string, it means your images are located along side with current document.

Creating var in a loop not working Jquery

I want to get all images src from class '.poi-reviews .poi-review'
however my code is returning only the first image src, always the same first!
what is wrong with my code ?
here it is :
jQuery('.poi-reviews .poi-review').each(function( ) {
var fotos = jQuery('.poi-reviews .author-photo-canvas img').attr('src');
var nome = jQuery('.poi-reviews .review-author-name a').text();
var divImage = "<img id="+nome+" alt="+nome+" height='150 'width='150' src="+ fotos +">" ;
inicio.after(divImage);
});

In jQuery, .each() takes the DOM selection you have made with $("#selection") and iterates over it.
The easiest way to approach this is to have a results array and to push the images' src attributes to it:
JavaScript
var results = [];
$("div > img").each(function () { // selects all img under a div tag and loops through
results.push($(this).attr("src")); // pushes the src attribute of $(this), aka the img,
}) // to the results array
$("#results").text(results.join(", "));
// could also console.log() the results;
// I appended to the DOM so you could easily see it on the fiddle
HTML
<p id="results"></p>
<div>
<img src="http://placekitten.com/200/300" />
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/300/300" />
<img src="http://placekitten.com/300/200" />
</div>
fiddle

That is because there are more than one element so, the attr() call will return the value of only the first element.
You need this:
var fotos = jQuery('.poi-reviews .author-photo-canvas img').map(function() {
return this.src;
}).get();
Now, fotos is a an Array containing the urls. Do what you want with them.

how to get src id

<div id="2" class="dsi" onmousedown="test(2);" ondrop="checkImg('2');dropIt(event,2);" ondragover="event.preventDefault();">
<img src="2.gif" draggable="true" ondragstart="dragIt(event,2);" onmousedown="test(1)" id="pic2" />
</div>
I want to get src of img using javascript. How can I do it ?(i wonto get img id using div id.i mean using div id as 2 then result is pic2.)

If you want to get the src of the image then
var imgSrc= document.getElementById("pic2").src;

Using JavaScript
document.getElementById("pic2").getAttribute("src");
Using Jquery
$("#pic2").attr('src')
For the second question you asked in comment on how do we get in case of a loop.
I am assuming your id are like pic1, pic2, .... , pic9
for (i = 1; i <= 9; i++) {
var picId = 'pic' + i;
document.getElementById(picId).getAttribute("src");
}

var imgSrc= document.getElementById("pic2").src;

Try this code
jQuery method :
var youtubeimgsrc = $('#pic2').attr('src');
javascript method :
var youtubeimgsrc = document.getElementById("pic2").src