I'm using REGEX and js replace to dynamically populate a variable in a href. The following code works the first time it is used on the page, but if a different variable is passed to the function, it does not replace ANYTHING.
function change(fone){
$("a[href^='/application']").each(function(){
this.href = this.href.replace(/device=.*/,"device="+ fone);
});
}
The problem is that this.href actually returns a full absolute URL. So even your HTML is <a href="/foo"> the .href property will return http://mydomain.com/foo.
So your href attributes is being populated with a full absolute URL, and then the a[href^='/application'] selector doesn't match anymore, because the href attribute starts with the domain name, instead of /application.
.href returns a fully qualified URL, e.g. `http://www.mydomain.com/application/...'. So the selector doesn't work the 2nd time around since your domain relative URL has been replaced with a full URL, and it's looking for things that start with "/application".
Use $(this).attr('href').replace... instead.
Fiddle here: http://jsfiddle.net/pcm5K/3/
As Squeegy says, you're changing the href the first time around so it no longer begins with /application - the second time around it begins with http://.
You can use the jQuery Attribute Contains Selector to get the links, and it's probably also better practice to use a capture group to do the replacement. Like so:
$("a[href*='/application']").each(function(){
this.href = this.href.replace(/(device=)\w*/, "$1" + fone);
});
You'll need to add the g flag to match all instances of the pattern, so your regular expression will look like this:
/device=.*/g
and your code will look like:
this.href = this.href.replace(/device=.*/g,"device="+ fone);
The reason is that unless all you links start as "/device=." the regex wont work.
you need to use /.*device=.*/
the lack of global flag is not the problem. its the backslash in your pattern.
Related
Ok this one seems pretty simple (and it probably is). I am trying to use jQuery's replace with method but I don't feel like putting all of the html that will be replacing the html on the page into the method itself (its like 60 lines of HTML). So I want to put the html that will be the replacement in a variable named qOneSmall like so
var qOneSmall = qOneSmall.html('..........all the html');
but when I try this I get this error back
Uncaught SyntaxError: Unexpected token ILLEGAL
I don't see any reserved words in there..? Any help would be appreciated.
I think the solution is to only grab the element on the page you're interested in. You say you have like 60 lines. If you know exactly what you want to replace..place just that text in a div with an id='mySpecialText'. Then use jQuery to find and replace just that.
var replacementText = "....all the HTML";
$("#mySpecialText").text(replacementText);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mySpecialText">Foo</div>
If you're only looking to replace text then jaj.laney's .text() approach can be used. However, that will not render the string as HTML.
The reason the way you're using .html() is likely illegal is that qSmallOne is not a JQuery object. The method cannot be performed on arbitrary variables. You can set the HTML string to a variable and pass that string to the .html() function like this:
var htmlstring = '<em>emphasis</em> and <strong>strong</strong>';
$('#target').html(htmlstring);
To see the difference between using .html() and .text() you can check out this short fiddle.
Edit after seeing the HTML
So there is a lot going on here. I'm just going to group these things into a list of issues
The HTML Strings
So I actually learned something here. Using the carriage return and tab keys in the HTML string is breaking the string. The illegal-ness is coming from the fact the string is never properly terminated since it thinks it ends at the first line. Strip out the white space in your strings and they're perfectly valid.
Variable Names
Minor thing, you've got a typo in qSmallOne. Be sure to check your spelling especially when working with these giant variables. A little diligence up front will save a bunch of headache later.
Selecting the Right Target
Your targets for the change in content are IDs that are in the strings in your variables and not in the actual DOM. While it looks like you're handling this, I found it rather confusing. I would use one containing element with a static ID and target that instead (that way you don't have to remember why you're handling multiple IDs for one container in the future).
Using replaceWith() and html()
.replaceWith() is used to replace an element with something else. This includes the element that is being targeted, so you need to be very aware of what you're wanting to replace. .html() may be a better way to go since it replaces the content within the target, not including the target itself.
I've made these updates and forked your fiddle here.
So I am writing a jquery selector for custom data-xx attribute. What I have as value for this attribute is network path. In my script I am trying to identify the which was clicked by using value of this attribute in my selector
here is code layout
<a data-path="\\network\Dir1\SubDir\SubDir2\file.xml" href="#">Link1</a>
and this is my selector which returns nothing.
$('a[data-path="\\\\network\\Dir1\\SubDir\\SubDir2\\file.xml"]')
only time my selector works is when I just use file name
$('a[data-path*="\file.xml"]')
I am not sure if there is something wrong with the way am escaping backslash here or in the way am using custom attribute selector.
If I do $('a#id').data('path') i get this
"\network\Dir1\SubDir\SubDir2\file.xml"
thanks
As stated in your question comments, you need to use 4 backslahes per backslash in the path:
var allLinks = $('a');
var longLink = $('a[data-name="\\\\\\\\network\\\\Dir1\\\\SubDir\\\\SubDir2\\\\file.xml"]');
console.log(" *** links found: ", allLinks.length, longLink.length);
Here is a working example: http://plnkr.co/edit/D2w8G7yTaOusG5qwT51x?p=preview
$('a[data-path="\\\\\\\\network\\\\Dir1\\\\SubDir\\\\SubDir2\\\\file.xml"]')
this can be worked , but i don't know it's theory exactly.
this is what i did eventually. First comment resolved it for me.
var path = 'value in html';
path.replace(/\\/g, '\\\\');
$(a'[data-path*="' + path+ '"]');
What is the best way to get the "anything" part after the domain part, using Javascript:
http://www.domain.com/anything
http://www.domain.com/#anything
http://www.domain.com/any/thing
For http://www.domain.com/#anything I would have to use window.location.hash. But for http://www.domain.com/anything I would have to use window.location.pathname.
I'm using:
window.location.href.replace(window.location.origin, "").slice(1)
Are there any caveats with this solution? Is there a better way?
Caveats:
location.origin is not supported by IE.
Other improvements: .slice is actually calling Array.prototype.slice. A method call that requires a prototype lookup is bound to be slower than accessing the element you need directly, escpeciallly in your case, where the slice method is returning an array with just 1 element anyway. So:
You could use location.pathname, but be weary: the standard reads:
pathname
This attribute represents the path component of the Location's URI which consists of everything after the host and port up to and excluding the first question mark (?) or hash mark (#).
but I think the easiest, most X-browser way of getting what you want is actually simply doing this:
var queryString = location.href.split(location.host)[1];
//optionally removing the leading `/`
var queryString = location.href.split(location.host)[1].replace(/^\//,'');
It's very similar to what you have now, except for the fact that I'm not using location.origin, which, as shown on MDN is not supported by MS's IE...
Another benefit is that I'm not calling Array.prototype.slice, which returns an array, and requires a prototype-lookup, which is marginally slower, too...
window.location.pathname + window.location.search + window.location.hash
I think this one is a little bit better. You dont have to use any functions here...
I am looking at someone elses codebase and I as a javascript noob and doubly so a regular expression noob I can't figure out what the following lines do:
var url = sel.anchorNode.parentNode.href;
var match = self.location.href.replace(/\/$/i, '');
var replaced = url.replace(match,'');
I read it as:
set the var url to the href value of the parent node of the currently selected node
sets the var match to the browsers current URL with the trailing '/' removed (if it exists)
sets the var replaced to the string returned in 1. with the string returned in 2. removed from it
If I am reading it correctly I just can't figure out how it would ever do anything. There isn't any situation, I can think of, where the parent node of a currently selected node would have an href value pointing to the current URL.
So I think I am reading it incorrectly.
Because the href property of an anchor is a fully-resolved URL (even if the href attribute is relative), what that does is remove the current page's path and get you back to a relative URL. E.g., on the page:
http://example.com/foo/bar/
with a link like
...
...you get the href from the anchor which is:
http://example.com/foo/bar/nifty.html
...and then remove http://example.com/foo/bar from it, giving you:
/nifty.html
In this case, of course, that's probably not what you actually want. :-) I have to admit I fail to see how the code is useful, out of context, but then context is king sometimes...
I'm creating a javascript that checks for links in the DOM and changes those who are NOT absolute links. Unfortunately I'm not having any luck...
I would like to match only the first type of links below, and add a folder path
link
<a href"http://somesite.net/somepage.html">link</a>
I've used string.replace(/a.+href="([^http]+)"/, 'path'+$1); to no avail...
Can someone help me here? Thanks in advance.
If the regular expression that you've written to solve a problem using just regular expressions starts to look like overkill, then it is probably overkill. Sometimes a simple if statement used in conjunction with regular expressions can do wonders:
$("a").each(function () {
if (!/^http:\/\//.test(this.href)) {
this.href = "http://example.com/folder/" + this.href; // etc.
}
});
You may want to look at the <base> html tag, instead. It allows you to set the path to which all links and images are relative.
http://www.w3schools.com/tags/tag_base.asp
http://www.w3.org/TR/html5/semantics.html#the-base-element
You've created a character class with the square brackets. Remove them. You want a "negative lookbehind", see comment below for info on syntax. Not all languages support this regex feature though.
Javascript doesn't support lookbehind. This may help though: http://blog.stevenlevithan.com/archives/mimic-lookbehind-javascript
You can use
string.replace(/(a.+href=)"(?!http)(.+)"/gi, '$1"path/$2"')
for example sake, I just made a variable with a couple links in it. You can easily adapt the .replace() to work with however you get the links.
var content = 'linklinklink';
// whatever you want to prefix link with
var base='http://somsite.net';
content = content.replace(/(href=")(?!https?:\/\/)([^"]*)/gi,'$1'+base+'/$2').replace(/\/+/g,'/');
Thanks everyone.
I was able to replace relative paths ONLY by using the following syntax:
var basepath = "pathto/";
var html = html.replace(/(<(a|img)[^>]+(href|src)=")(?!http)([^"]+)/g, '$1'+basepath+'$4');