Insert javascript variable inside href attribute - javascript

I'm trying to dynamically generate an HTML link and have that link be the href attribute of my anchor tag inside my AngularJS application. I have the code below:
const objectUrl = baseUrl + s3Bucket + '/' + objectKey;
const link = '<a href=`${objectUrl}`> MyLink</a>';
I thought that using JS's string templating would work but this inserts %60$%7BobjectUrl%7D%60 at the end of URL. I've also tried
const link = '<a href={{objectUrl}}> MyLink</a>';
but that gives me the same literal string %60$%7BobjectUrl%7D%60. Is there any way to insert the variable so that the href link becomes baseUrl + s3Bucket + '/' + objectKey?

try this
const link = '<a href="'+objectUrl+'" > MyLink</a>';

You have the template string the other way around. The ` should go on the outside of your string.
const objectUrl = 'yourURL';
const link = `MyLink`;
console.log(link);

Try
<a ng-attr-href="{{objectUrl}}">My Link</a>

Use template literal like this:
const link = `MyLink`

Related

Href how to pass dynamic data

[![enter image description here][1]][1]In href how to pass path with dynamic data, below I'm giving my code:
var abc = response[i].DocumentName;
var photoName = "<a href='#Url.Content("~/UploadImage/")" + abc +'" target="_blank" >'+response[i].DocumentName+'</a>';
in debugger mode i am getting like this:-
photoName = "jpeg2_10514.jpg"
which is not working for me
Try this:
var photoName = "" + response[i].DocumentName + "";
In Javascript you have to escape doublequotes " with a backslash \ if you want them to appear in the string.
The backslash in + abc + "\" is there to escape the second " to enclose the href in doublequotes.
EDIT
I added the missing doublequote befor the anchor tag according to the tip of karan.

Passing an array to a function and escaping double quotes in Javascript

I am generating dynamic HTML and want to pass an array to the calling function. The array is also being dynamically generated.
The contents of pinfoarray are somewhat like this "Ice Hockey","Junior Basketball","Ladies Soccer"
var theHost = "<a href='#someDialog' onclick='chnghost(' + pinfoarray + ');' data-toggle='modal' class='button'>Change</a>";
How can make it send the array to the calling function without an error.
How about making it like this:
var anchor = document.createElement('a');
anchor.href = '#someDialog';
anchor.setAttribute('data-toggle','modal');
anchor.className='button';
anchor.onclick = function(){
chnghost(pinfoarray);
}
You need to properly terminate the string and encode the parameter. You also need to guard against reserved characters in your data (escapeHtml).
var theHost = "<a href='#someDialog' onclick='chnghost(" + escapeHtml(JSON.stringify(pinfoarray)) + ");' data-toggle='modal' class='button'>Change</a>";
If you're using jQuery, you can implement escapeHtml like so:
function escapeHtml(text) {
return $("<div/>").text(text).html();
}
You need to close the string double quote to put a javascript variable:
var theHost = "<a href='#someDialog' onclick='chnghost('" + pinfoarray + "');' data-toggle='modal' class='button'>Change</a>";

Define image src tag using portion of an URL using JavaScript

With the code below, I am able to get a variable without a slash from the URL into my HTML.
var pathArray = location.pathname.split( '-' );
var URLwithoutDashes = pathArray[0];
var URLwithoutSlash = URLwithoutDashes.substring(1);
document.write(URLwithoutSlash);
Now I'd like to use it as my img src tag (with the extention .png), but I can't figure out how to do it. The code below doesn't seem to work.
var pathArray = location.pathname.split( '-' );
var URLwithoutDashes = pathArray[0];
var URLwithoutSlash = URLwithoutDashes.substring(1);
document.write("img src=\""URLwithoutSlash".png\">");
How can I solve this?
This line:
document.write("img src=\""URLwithoutSlash".png\">");
Should be:
document.write("<img src=\"" + URLwithoutSlash + ".png\">");
Use
document.write("<img src=\"" + URLwithoutSlash + ".png\" />");

Undetermined String Literal Error with DIV-Tag

I have a Javascript / JQuery problem.
I get unterminated string literal when I use this code:
var newInfo = '<div><span class="testClass"><a title="edit" href="'+link+'">'+oldVal+'</a></span></div>';
If I delete the </div>
tag, it works... But I need this.
I am totally out of ideas.
Maybe you can help, thanks.
Escape your slashes.
var newInfo = '<div><span class="testClass"><a title="edit" href="' + link + '">' + oldVal + '<\/a><\/span><\/div>';
You could also just build your html as actual DOM elements instead of a string (which avoids a lot of pitfalls, including this one).
var div = $('<div />'),
span = $('<span />').addClass('testClass'),
a = $('<a />').text(oldVal).attr({
"href": link,
"title": "edit"
}),
newInfo = div.append(span.append(a));
Try to use
var newInfo = '<di'+'v><span class="testClass"><a title="edit" href="'+link+'">'+oldVal+'</a></span></di'+'v>';
Seperating the div tags helped me on a similar problem

jQuery -> Change Window.href

How would I use jQuery to redirect the page to teh base page + some string?
Specifically, I need to set the window.href = current page without params + 'SomeString';
Try something like this:
window.location.href = window.location.pathname + 'SomeString';
var loc = window.location + '';
window.href = loc.replace('(\?(.+))','') + str;

Categories