We Keep Coding

Background-image:URL jumbles the url. when made in JS

In my Js script i tried escaping,setting string to another complete variable and everything i can think of doing.
But cant figure out why the "/ "character in the background-image:url("../") is giving me such a hard time.
Here is a piece of code from my Js script.
let image = "../../" + value.image;
receptenMarkup += '<div class="receptImage" style="background-image:url("../../'+ value.image +'");" alt="test"></div><img src="'+ image + '">';
"../../'+ value.image +'" comes back correctly in the console.log as the path.
Image comes back as the correct path.
Example:
../../images/recepten/thai-chicken.jpg
My console.log of the entire markup also shows a correct path.
<div class="receptImage" style="background-image:url("../../images/recepten/noodle- soup.jpg");" alt="test">
but!! here is the Result in the inspector..
RESULT INSPECTOR:
<div class="receptImage" style="background-image:url(" ..="" images="" recepten="" noodle-soup.jpg");"="" alt="test"></div><img src="../../images/recepten/noodle-soup.jpg">
Notice the image url works great and fine!
The CSS part on the other hand gets all sorts of crazy.
I cant get this to work properly and point the background image to the right path.
I collect a lot of Json data and make cards based on that.
the background image needs to be in a div so i can style it in RWD and not deform like an image tag does.
Somehow i cant get this to work.
Can anyone please give me pointers?
I tried
1: using ../../ to escape ../../ to escape
2: using just "/'value.image'" to go to the root of the website as W3 suggests, no go.
I bee at this for hours now and my deadline is approaching..
Please can anyone explain why the / becomes a space and i get stuff like image=.. in there which i didnt even type that wat.
URL and IMG react differently.

The problem isn't the /, it's the mismatched quote characters delimiting the strings and attribute values.
The simple fix for this is to use a template literal:
receptenMarkup += `<div class="receptImage" style="background-image: url('../../${value.image}');" alt="test"></div><img src="${image}">`;
Side note; I would suggest making all paths relative to the site root, not relative to the current page.

Replace Emoji with image while preserving it as an Emoji

I'd like to replace Emojis on my website with custom images. That itself would not be a problem in PHP:
$string = "This is a laughing emoji 😂";
echo str_replace($string, "😂", ":'D"); //or replace with an image
However, how do I manage that if someone copies the text, they will be able to copy the text with the emoji and not the replaced image? Like keeping the char 😂 😂 but only changing the outcome so they will look the same for every user. Is that even possible at all?

One way to do this would be to replace the emoji with an <img> image tag, but set the alt attribute of the image to the original emoji. Then, if the result is copied somewhere that only accepts text, the alt text will be used.
"Run" this snippet to see an example:
Hello <img alt="😀" src="data:image/png;base64,R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7"> world!
<br/>
<textarea cols="25" rows="3">Paste here</textarea>
The emoji between the two words will look like a Gmail emoji, until you copy the entire line of text somewhere.
Of course, you can use a normal URL instead of a data: URL.

No, each system has its own sets of fonts ( including emojis ) which is why they appear different on android vs iOS. The only way you would be able to add something would be outside of the system typeface, i.e. icon sets. You could either include images or links to images.
<img src="imageLocation" alt="altTextorImage">

Escaping HTML special character with JSP or JQuery

My JSP file contains a table with the following row:
<td class="description" id="${doc.id}"></td>
I want it to be empty at first, as above. Later, after the page is loaded and some logic is processed, I want to fill it asynchronously with a content using JQuery .html method:
$("#${doc.id}").html("${doc.description}");
For regular user inputs everything works fine, but error occurs, when a user enters special character: "
How can I prevent application from reading that character as special, and have the application running correctly?
I have tried to use JSP escape functions like this:
$("#${doc.id}").html("${fn:escapeXml(doc.description)}");
And this:
$("#${doc.id}").html("<c:out value="${doc.description}"/>");
And neither first nor second worked. Why?

Here is one way - seeing you already have the data on the page
<td class="description hide" id="${doc.id}"><c:out value="${doc.description}"/></td>
where
.hide is {display:none}
and then
$("#${doc.id}").show();

Passing apostrophe to javascript function

I am not finding a solution on this one using JavaScript (to utilize localStorage) in a JSP.
Trying to pass something with apostrophe. I have done a .replaceAll() and replaced the ' with ' and it still passes it as an '.
I have also tried a .split("'") and replaced the apostrophe with:
(\' , ' , \', '' , ''' and '\'')
All of these just pass an apostrophe to the function (what I see when I hover over the link) like this:
Save job
With a and b being the two split substrings but with no effect. I do notice that spaces are converted into %20, but that's little comfort. Any other ideas?

Your JSP code is irrelevant. Decide what HTML you want to produce and produce it.
The following are all valid HTML markup:
<a href="saveJob('Bob\'s Question')"> …
<a href="saveJob("Bob&apos;s Question")"> …
<a href="saveJob('He said "Go Away"')"> …
<a href='saveJob("He said \"Go Away\"")"> …
… and the following are invalid:
<a href="saveJob('Bob's Question')"> <!-- JS string ends early -->
<a href="saveJob("Bob's Question")"> <!-- HTML attribute ends early -->
<a href="saveJob('Bob&apos;s Question')"> <!-- JS string ends early -->
<a href="saveJob('He said "Go Away"')"> <!-- HTML attribute ends early -->
You cannot use your HTML attribute delimiter in your attribute value except as an HTML entity. You cannot use your JavaScript string delimiter in your JavaScript string unless you escape it, even if you use an HTML entity to describe it.
In general, you should not be putting JavaScript in your HTML (you should attach event handlers to your markup programmatically, from script), and you especially shouldn't be abusing an HTML anchor as a JavaScript trigger (either use an HTML anchor to a valid URL and let JavaScript hijack the link if enabled, or use a <button> or other element to invoke script-only side effects).

As you've noticed, such manual string escape tasks can be quite tricky; covering apostrophes won't even get you all the way: what if there's a newline in the string? That would break the script as well.
I would recommend converting your data to a JSON object, perhaps using JSON-taglib. This should take care of all required escaping for you.

The Phrogz solution
<a href="saveJob("Bob&apos;s Question")">
works fine if you have only apostrophes in your text.
If your text contains both apostrophes and quotes, you can use a hidden div (div with style='display:none;') for the text, pass the id of the div to saveJob instead of passing the text itself, and get the text inside saveJob by using
document.getElementById(myId).innerHTML

Inserted code producing unexpected result

So eventually I want to have a greasemonkey script but for now I have only been working with firebug to test out my html/javascript.
I have this code to insert one button in the HTML toolbar for blogger.
The button is supposed to replace all the with " " as blogger seems to just randomly add into my blogs posts and can cause the published article to look weird (a bunch of words separated in between with s will not want to break in the middle unlike the same words separated with " ").
document.getElementById("postingHtmlToolbar").firstChild.innerHTML += '<div id="SP" class="goog-inline-block goog-toolbar-button" title="SP" role="button" style="-moz-user-select: none;"><div class="goog-inline-block goog-toolbar-button-outer-box"><div class="goog-inline-block goog-toolbar-button-inner-box"><b>SP</b></div></div></div>';
Which trimming away the formatting just leaves us with.
<b>SP</b>
The funny thing is that that same code (minus the href, javascript: stuff) run from firebug works perfectly.
But when it is inserted like this and run it blanks the entire web page and writes the value of document.getElementById('postingHtmlBox').value.replace(/ /g, ' ') into this black page.
Am I forgetting something stupid? Is this supposed to happen? Do I have some stupid syntax error? What would you suggest as a solution?

Don't put JS code in href. use onclick:
<b>SP</b>

Try adding void(0); to the end of the href.
Basically, the output of the last statement (if any) is replacing the document (i've had the same problem), so making the last statement one with no output will avoid the problem