I made a mistake and forgot to use the attribute value in some code I was writing:
var link = document.getElementsByClassName("summary-title-link")[0],
ele = document.createElement("a");
ele.href = link;
and I was surprised to see that it still worked regardless.
In extension with this example below, I find it odd that I don't need to target the href attribute before using pathname? it seems to assume somehow that I want the pathname from the href attribute.
var link = document.getElementsByClassName("summary-title-link")[0].pathname;
"/test-link/1"
When you convert an anchor element to a string, you actually get the href value, or more precisely "the whole URL", and not the outerHTML as you would with most other elements, that's why it works
var href = document.getElementsByClassName("test")[0]; // DOM element
console.log(href.toString()); // gives you "http://google.com"
<a class="test" href="http://google.com">link</a>
This special behaviour for anchors is specified in the specification
HTMLHyperlinkElementUtils.toString()
Returns a USVString containing the whole URL.
It is a synonym for URLUtils.href, though it can't be used to modify the value.
Related
I'm using a widget (Purechat) that allows customers and operators to communicate to each other. I've ran into an issue where anchors' href values inside this widget are being appended with "http://%20", thus making them unclickable to our users. We are investigating the code, however, I would like a quick fix for this by replacing all href contents that contain "http://%20" and replace that portion of the href with an empty string so my anchors work.
What would be the best way to go about this?
$('a').attr('href', function(index, value) {
return value.replace("//%20", "");
});
You can run a foreach jquery function which runs over every anchor whose href starts with that string, then cut it with substring method and set it's href value again.
This should work:
$("a[href^='http://%20']").each(function(){
var oldHref = $(this).attr('href');
var newHref = oldHref.substring(10, oldHref.length);
$(this).attr('href',newHref);
});
I'm using selenium to inspect a web element and then get its "href"
driver.findElement(getSelectorForButton(name)).getAttribute("href")
why the result I get is ...current url...# instead of jut # as I see in the browser console?
<a class="action-btn big-button btn-phone take-button v3" data-model="{"analytics_url":"/coupons/use?action_source=popup&cookie=..uot;],"redirect_url":null}" href="#">
<div class="btn-text">
<span>Call Now</span>
</div>
</a>
I may be wrong but I think it is because
driver.findElement(getSelectorForButton(name));
does not return the DOM element, but a selenium wrapper which getAttribute property (method) invoked with the ('href') argument does not return the href attribute content, but the href property content.
The href property is 'filled' by the browser automatically with the matching prefix for every relative/absolute path in href.
Examples below:
HTML:
Test
Test
Test
JavaScript:
var a = document.getElementById('link1');
console.log(a.href); // '...Whatever_your_url_is...#'
console.log(a.getAttribute('href')); // '#'
var b = document.getElementById('link2');
console.log(b.href); // '...Whatever_your_url_is.../uri'
console.log(b.getAttribute('href')); // '/uri'
var c = document.getElementById('link3');
console.log(c.href); // '...Whatever_your_domain_and_port_is.../uri'
console.log(c.getAttribute('href')); // './uri'
DEMO here: http://jsfiddle.net/j8t470uk/
The reason is (as per docs)
this method will return the value of the given attribute, unless that attribute is not present, in which case the value of the property with the same name is returned (for example for the "value" property of a textarea element). If neither value is set, null is returned.
getAttribute first of all looks for the attribute in the DOM, where if you can see href contains the complete web url.
For example: in the answers you are getting on this question if you inspect the active tab you could see href="/questions/28339297/why-does-selenium-change-the-elements-href?answertab=active#tab-top", but if you have a look at the DOM there you can find this href is appended to http://stackoerflow.com.
Basically, I'm trying to replace a part of url in the middle ('#') with another one, and remove first part of url. Script replaces '#' with no problem but rfuses to remove the first part of url. Am i doing something wrong, or is there another solution for that?
html of it
<a class="link_imagelibrary" href="#pink_yellow_flowers.pdf?5612">Download pdf set</a>
on condition changes to
<a class="imgdownload" href="http://www.picturewall.com/pages/Botanicalhttp://#.com/s/files/1/0183/2687/files/passpink_yellow_flowers.pdf?5612">Download pdf set</a>
jquery
$(".imgdownload").each(function(){
this.href = this.href.replace('#', 'http://#.com/s/files/1/0183/2687/files/pass');
this.href = this.href.replace('http://www.#.com/pages/botanical', '');
});
It's supposed to happen on condition. Judging that the rest of the script works fine on the condition- looks like the problem is somewhere here
This line is not being matched
this.href = this.href.replace('http://www.picturewall.com/pages/botanical', '');
because it doesn't exist in your href: (Note the capitalisation of 'Botanical')
"http://www.picturewall.com/pages/Botanicalhttp://cdn.shopify.com/s/files/1/0183/2687/files/passpink_yellow_flowers.pdf?5612"
The href is expanding with this.href, so while you have:
<a href="#" ...
The DOM element's href property gets this:
<a href="http://example.com/your/page/wherever.php#" ...
The easiest way to handle this is to do it differently:
$(".imgdownload").each(function(){
this.href = 'http://cdn.shopify.com/s/files/1/0183/2687/files/pass' +
this.href.split('#').pop();
});
Here is a demonstration of the "problem":
$('a').each(function ea(){
console.log(this.href, this.getAttribute('href'));
});
http://jsfiddle.net/Gtr8V/
You'll note that element.getAttribute('href') does return the raw href attribute value, not the property. You could use this with .replace() instead of the this.href.replace() you were trying.
I have captured 3 values from a datalist template using JavaScript, now I need to append these values into an existing anchor which is:
<a id="link" href='nextpage.aspx?id=<%#Eval("PlateId")%>&pp= #Eval("price")%>'>
I found the way to get the anchor href from JavaScript:
<script language='javascript' type="text/javascript" >
function addLink() {
var anchor = document.getElementById("link");
anchor.href = anchor + "&qty=";}
</script>
But, I can't add the js value after "&qty=", I have tried adding the value like this:
anchor.href = anchor +"&qty=+Value+"
And with this:
anchor.href = anchor +"&qty='Value' "
I can't put it out of the quotation marks, because it won't display in the anchor.
anchor.href = anchor + "&qty="
should be
anchor.href = anchor.href + "&qty="
...otherwise you are trying to turn the link element into a string!
Meanwhile, you still need to keep Value out of the quotation marks, otherwise the final text generated will always be exactly that text: Value. If Value is a variable and is not returning the value you expect (an empty or undefined value, for example), then you need to look at the code that declares it and change that.
Dynamically change href atrribute value (or) You can
able to append the existing URL
Tips: 1 - Use the jQuery .attr() Method
$("selector").attr("href", newURL));
Tips: 2 - Use javascript element selector document.getElementById
example:
TEST URL
var redirect_url = document.getElementById('test');
redirect_url.href = "new url";
(or)
document.getElementById('test').href = "newURL";
(or)
using setAttribute() method *Note:broken in IE
redirect_url.setAttribute("href", "new url");
Hi I am currently trying to replace a query string value in a a link's src attribute.
it works fine in firefox but not in ie.
example:
<a id="link" href="#" src="http://somedomain.com?id=123&size=20">link</a>
then on my js it looks kinda like this:
var link = document.getElementById('link');
link.src.replace('size=20', 'size=45');
in ie, it returns something like src is not an object error;
anyone kind enough to lend a hand?
also, i need this to be on native javascript so please don't suggest a framework as a solution thanks.
To get it to work in IE you're going to need to use link.setAttribute('src', ...).
use:
var link = document.getElementById('link');
var src = link.getAttribute("src").replace('size=20', 'size=45');
link.setAttribute("src", src);
Well, links (anchor elements) don't have a src attribute, I think that you want to change the href attribute:
var link = document.getElementById('link');
link.href = link.href.replace('size=20', 'size=45');
In your case the "src" attribute in your link is an expando attribute, since an anchor tag does not have a src.
When working with expando attributes, it's safest to set and get the values using the setAttribute('attributeName',***value*)** and getAttribute('attributeName') accessors.
To find out more about getAttribute and setAttribute you can check here:
https://developer.mozilla.org/en/DOM/element.getAttribute
https://developer.mozilla.org/en/DOM/element.setAttribute
To find out more about DHTML properties you can check the MSDN Resource here:
http://msdn.microsoft.com/en-us/library/ms533055%28VS.85%29.aspx
Example Code using getAttribute and setAttribute:
var link = document.getElementById('link');
var src = link.getAttribute('src');
link.setAttribute('src',src.replace('size=20','size=40'));
I believe getAttribute is more cross-browser friendly.
var link = document.getElementById('link');
var result = link.getAttribute("src").replace('size=20', 'size=45');
Also, the replace function returns a string. It doesn't operate on the string it is called against. This means you have to assign the result.
link.setAttribute("src", result);