We Keep Coding

Replace dynamic keyword from HTML content using jQuery

<div class="fotorama__stage__frame magnify-wheel-loaded fotorama_vertical_ratio fotorama__loaded fotorama__loaded--img fotorama__active" aria-hidden="false" data-active="true" style="left: 0px;" href="https://static.domain.com/media/catalog/product/cache/713229083fb198/h/a/123.png">
<img src="https://static.domain.com/media/catalog/product/cache/713229083fb198/h/a/123.png" class="fotorama__img" aria-hidden="false"></div>
I want to replace /cache/713229083fb198/ from IMG attribute and load that image again.
From
https://static.domain.com/media/catalog/product/cache/713229083fb198/h/a/123.png
to
https://static.domain.com/media/catalog/product/h/a/123.png
I want to replace it using jQuery.

Here is how you replace it with a regex that looks for any number and lowercase character for the random looking part.
var img = document.querySelector(".fotorama__img");
var src = img.src;
img.src = src.replace(/cache\/[0-9a-z]+\//, '');
console.log(img.src);
<div class="fotorama__stage__frame magnify-wheel-loaded fotorama_vertical_ratio fotorama__loaded fotorama__loaded--img fotorama__active" aria-hidden="false" data-active="true" style="left: 0px;" href="https://static.domain.com/media/catalog/product/cache/713229083fb198/h/a/123.png">
<img src="https://static.domain.com/media/catalog/product/cache/713229083fb198/h/a/123.png" class="fotorama__img" aria-hidden="false"></div>

Use .attr( function ) to changing src attribute of image. In function use regex in .replace() to matching target part of string.
$(".fotorama__img").attr("src", function(i, src){
return src.replace(/\/cache\/[^\/]+/, "");
});
console.log($(".fotorama__img").attr("src"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://static.domain.com/media/catalog/product/cache/713229083fb198/h/a/123.png" class="fotorama__img" aria-hidden="false">

JQuery single and double quotes problems

I am trying to insert a tag into the page. but inside that a tag, it has both single quote and double quote, so i try put that part into an variable Var content. Can someone tell me why this var content is not showing on onclick after code runs?
var content = "javascript:window.open('https://ds.contactatonce.com/ds/p10819departmentselector.htm?OriginationUrl='+encodeURIComponent(location.href),'','resizable=yes,toolbar=no,menubar=no,location=no,scrollbars=no,status=no,height=520,width=450');return false;"
$('<a style ="float: left; margin-top: 20px" href="#" onclick=" + content + " ><img onerror="this.height=0;this.width=0;" border="0" alt="Click to instant message Representative Now!" title="" src="https://dm5.contactatonce.com/getagentstatusimage.aspx?MerchantId=270075&ProviderId=10819&PlacementId=10"></a>').insertBefore('.header-contact-phone');
it was like this before but it keep showing errors
$('<a style ="float: left; margin-top: 20px" href="#" onclick="javascript:window.open('https://ds.contactatonce.com/ds/p10819departmentselector.htm?OriginationUrl='+encodeURIComponent(location.href),'','resizable=yes,toolbar=no,menubar=no,location=no,scrollbars=no,status=no,height=520,width=450');return false;" ><img onerror="this.height=0;this.width=0;" border="0" alt="Click to instant message !" title="Click to instant message a Now!" src="https://dm5.contactatonce.com/getagentstatusimage.aspx?MerchantId=270075&ProviderId=10819&PlacementId=10"></a>').insertBefore('.header-contact-phone');

Use the escape character \ before the quotes
like this:
var y = "We are the so-called \"Vikings\" from the north.";
see this links:
https://www.w3schools.com/js/js_strings.asp
https://www.w3schools.com/js/tryit.asp?filename=tryjs_strings_escape

Hide image if src is empty

I'm trying to hide <img> if the source is empty. But I have no luck.
I found few posts here, but it doesn't work for me.
Here is my code, it's table based because it will be a template:
Images:
<td width="92%" align="center" class="imagenes_desc">
<img class="imagen" src="http://webs.ono.com/norfolk/ebay/images/01.jpg" width="800">
<img class="imagen" src="" width="800">
<img class="imagen" src="" width="800">
<img class="imagen" src="" width="800">
<img class="imagen" src="" width="800">
<img class="imagen" src="" width="800">
<img class="imagen" src="" width="800">
<img class="imagen" src="" width="800">
<img class="imagen" src="" width="800">
<img class="imagen" src="" width="800">
</td>
Here is the Javascript I'm trying to implement.
<script type="text/javascript">
$(document).ready(function(){
if ($(".imagen").attr(src="") == "") {
$(".imagen").hide();
}
else {
$(".imagen").show();
}
</script>
I'm not very familiar with JS, I found this script here on Stackoverflow, but I can't get it to work.
Update
Trying this, but doesn't work (Chrome hides well, but Firefox and IE don't):
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript">
$("imagen").each(function(){
if ($(this).attr("src") == "")
$(this).hide();
else
$(this).show();
});
</script>
<style>
.hide {display:none !important;}
.show {display:block !important;}
</style>
Thanks,

You can just use CSS for this:
img[src=""] {
display: none;
}
<img src="">
<img src="http://dreamatico.com/data_images/kitten/kitten-2.jpg">

How about using jQuery's attribute selectors?
$(document).ready(function(){
$('.imagen[src=""]').hide();
$('.imagen:not([src=""])').show();
});
Working example here

Your logic is flawed.
if ($(".imagen").attr(src="") == "") {
$(".imagen").hide();
}
else {
$(".imagen").show();
}
This will not work, as you've got iterate through each instance of .imagen
$('.imagen').show().filter(function(){
return $(this).attr('src') == '';
}).parents('a').hide();
Above, we show all the .imagen's, then filter based on their src attribute, then hide the one's we're left with.
As a side point, you may want to hide the parent <a> element, rather than the image.

Just put space inside alt tag.Here is working code
<img class="imagen" src="" width="800" alt" ">

I am surprised that you don't have some kind of syntax error
And you're code is also wrong, because it does not test every instance of .imagen.
Do it like this
$(".imagen[src='']").hide();

You have wrong syntax for getting value of src by attr()
Change
if ($(".imagen").attr(src="") == "") {
To
$(".imagen").each(function(){
if ($(this).attr("src") == "")
$(this).hide();
else
$(this).show();
});

In your stylesheet make add the following code to define a "hidden" class:
.hidden {
display: none;
}
Then add the following javascript code:
$(document).ready(function() {
$(".imgagen").each(function() {
var atr = $(this).attr("src");
if(atr == "") {
$(this).addClass("hidden");
} else {
$(this).removeClass("hidden");
}
});
});

test for src attribute if its null, but anyway - if you hide images what happens to the wrapping A elements? Rather, dont generate A/IMG elements for those not having any image.

Your code that you have posted should work but make sure that u have added the jquery library files on the header of ur html page .
go to jquery site and then download the js file. then add the following line on HTML page section head :

Elegant way to extract specific text from between HTML nodes?

From the following string I need the dynamically changing "6.903" number to make calculation with.
Is there some regular expression or some jQuery trick to do that easily or elegantly?
<a href="javascript:void(0)" class="" id="buddyTrigger">
38.760 <img border="0" align="absmiddle" alt="Arany" src="/img/symbols/res2.gif">
5 <img border="0" align="absmiddle" alt="Pokolkristály" src="/img/symbols/res3.gif">
220 <img border="0" align="absmiddle" alt="Szilánk" src="/img/symbols/res_splinters.png">
91 / 125 <img border="0" align="absmiddle" alt="Akciópont" src="/img/symbols/ap.gif">
6.903 / 82.100 <img border="0" align="absmiddle" alt="Életerő" src="/img/symbols/herz.png">
<img border="0" align="absmiddle" alt="Szint" src="/img/symbols/level.gif"> 41
<img border="0" align="absmiddle" alt="Harci érték" src="/img/symbols/fightvalue.gif"> 878</a>
Here is my code as lenghty solution, can I simplify somehow?
<script type="text/javascript">
var dataIn=$('#infobar div.gold').html();
var dataPrep2Split=dataIn.replace(/<img(.*)>/g,';');
var dataSplit=dataPrep2Split.split(';');
var myData2Int=parseInt(dataSplit[18].replace('.',''));
if(myData2Int<=10000) {
$('#player').find('button.btn').remove();
var putBack=dataIn.replace(dataSplit[18],'<span class="newmessage">'+dataSplit[18]+'</span>');
$('#infobar div.gold').html(putBack);
}
</script>

Use DOM methods; replacing things using .html() often breaks page features. Also, that regex is liable to break with the smallest change.
You're trying to grab the Life value right? And that ends with the <img> with alt="Életero".
So that text node is (based on the Q code):
var lifeValTxtNd = $("#buddyTrigger img[alt='Életero']")[0].previousSibling;
And this gets 6903 from the contents like 6.903 / 82.100:
var lifeVal = $.trim (lifeValTxtNd.nodeValue)
.replace (/^\s*(\d*)\.?(\d+)\s*\/.+$/, "$1$2")
;
lifeVal = parseInt (lifeVal, 10);
Then to wrap that section in a span use:
$("#buddyTrigger img[alt='Életero']").before (
'<span class="newmessage">' + lifeValTxtNd.nodeValue + '</span>'
);
lifeValTxtNd.parentNode.removeChild (lifeValTxtNd);
Doing it this way:
Won't break any event listeners on the page.
Is less susceptible to changes in the page layout/content.
Is easier to understand and maintain.
Will run faster, if performance is a factor.

Cannot get mouseover to work, don't understand JavaScript well enough

I have looked on Google, and everywhere in the forums. Just learning JavaScript, so any help is appreciated. When I put .wav in the parameters it says error, don't know if that makes a difference anyway.
In the head:
<script type="text/javascript">
function playSound(cellowav) {
document.getElementById("dummy").innerHTML=
"<embeded src=\""+cellowav.wav+"\" hidden=\"true\" loop=\"false\" />
}
</script>
In the body:
<span id="dummy"></span>
<p onmouseover="playsound('cellowav.wav');">
<img src="smiley.png" border="0" alt="smiley" />
</p>
Okay, I found that yes the cellowav doesn't belong in the parameter, or the string and the sound will play automatically with the embed tag in html. I was missing the closing -"- in the string fixed that. Changed the functions parameters from (cellowav) to (soundfile) and in the string + cellowav + to
soundfile +.
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("dummy").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\"
loop=\"false\" />";
}
</script>
<span id="dummy"></span>
<p onmouseover="playSound('cellowav.wav');"><img src="smiley.png"
alt="smiley"></p>

You're missing a " at the end of innerHTML=... in your function.
Furthermore you can't include cellowav.wav that way. You need to put in the url to the file there.
Should be looking something like this:
<script type="text/javascript">
function playSound(cellowav) {
document.getElementById("dummy").innerHTML=
"<embed src=\"" + cellowav + "\" hidden=\"true\" loop=\"false\" />";
}
</script>

It's unclear what you're actually trying to do, but cellowav.wav doesn't need to be brought out of the string; it's a constant:
"<embeded src=\"cellowav.wav\" hidden=\"true\" loop=\"false\" />
Also, you're not closing your <embed> tag's string. Notice the last double quote here:
"<embeded src=\"cellowav.wav\" hidden=\"true\" loop=\"false\" />" // <-- Quote
You have also misspelled embed. You've written embeded instead.
"<embed src=\"cellowav.wav\" hidden=\"true\" loop=\"false\" />"