Simple breadcrumb - javascript

I have this code of a breadcrumb that I found, but it shows the whole link. How can I make a similar simple breadcrumb that shows only the name of the page based on the path? (only in JavaScript)
(it would be good to change the background color too)
<SCRIPT LANGUAGE="JavaScript">
var path = "";
var href = document.location.href;
var s = href.split("/");
for (var i=2;i<(s.length-1);i++) {
path+=""+s[i]+" / ";
}
i=s.length-1;
path+=""+s[i]+"";
var url = window.location.protocol + "//" + path;
document.writeln(url);
</script>

do you mean that it will not include the site in the breadcrumbs??
<script language="Text/JavaScript">
var path = "";
var href = document.location.href;
var s = href.split("/");
for (var i=2;i<(s.length-1);i++) {
path+=""+(i == 2 ? "home" : s[i])+" / ";
}
i = s.length-1;
path += ""+s[i]+"";
var url = path;
document.writeln(url);
</script>

Related

Overwrite UTM Parameter

We do have some Campaigns (Google, facebook,...) When the user arrives the landingpage (abo.mysite.com) he does have the utm parameter utm_source=theCampaignSource. When the user clicks an CTA the CTA gives an new UTM utm_source=abo and he goes to shop.mysite.com.
We are not able to remove the UTM from abo.mysite.com.
Is there a way to check if a user have already an UTM, and when he does have one to kepp them until shop.mysite.com? So we know that the user is comming from Google (...)?
We know that how this Thing is set up is a very bad practice, and we are working on it.
Ive found a code snippet which is manipulating the links on a site:
links.forEach(function(link){
link.setAttribute("href","abo.mysite.com")
})
but i couldn get it work - cause i do have a lack of experience.
Update
To my specific needs a made it that way:
1) Remove existing UTM from Links on the Site
<script>
var link = document.getElementsByTagName("a");
for (var i = 0; i < link.length; i++) {
link[i].href = link[i].href.replace(/(\?)utm[^&]*(?:&utm[^&]*)*&(?=(?!utm[^\s&=]*=)[^\s&=]+=)|\?utm[^&]*(?:&utm[^&]*)*$|&utm[^&]*/gi, '$1');
}
</script>
2) Hash the UTM in the URL
<script>
if(!window.jQuery) {
document.write('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">\x3C/script>');
}
</script>
<script type="text/javascript">
$(document).ready(function() {
function getUrlVars() {
var vars = [],
hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
var parameters = getUrlVars();
var utm_source = decodeURIComponent(parameters['utm_source']);
var utm_campaign = decodeURIComponent(parameters['utm_campaign']);
var utm_medium = decodeURIComponent(parameters['utm_medium']);
</script>
3)rewrite every URL on the Site with the hashed UTMs
<script>
$('a').each(function(){
$(this).attr('href', $(this).attr('href') + '?utm_source=' + utm_source + '&utm_campaign' + utm_campaign + '&utm_medium' + utm_medium);
});
});
Edit
Thanks to Michele Pisani
this works well - BUT, if a user does not have an UTM, and he clicks the button, the UTM will be set to undefined
Is there a way to set the UTM Parameter from the URL when the User already has one, or to use the existing UTM (which are hardcoded in the button) when he does not have an UTM in the URL.
Edit 2 & update
Finally - with the help of you guys - i found a solution:
<script>
var link = document.querySelectorAll('a:not([href*="#"])');
for (var i = 0; i < link.length; i++) {
//link[i].href = link[i].href.replace(/(\?)utm[^&]*(?:&utm[^&]*)*&(?=(?!utm[^\s&=]*=)[^\s&=]+=)|\?utm[^&]*(?:&utm[^&]*)*$|&utm[^&]*/gi, '$1');
}
</script>
<script type="text/javascript">
$(document).ready(function() {
function getUrlVars() {
var vars = [],
hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
//var parameters = getUrlVars();
//var utm_source = decodeURIComponent(parameters['utm_source']);
//var utm_campaign = decodeURIComponent(parameters['utm_campaign']);
//var utm_medium = decodeURIComponent(parameters['utm_medium']);
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
//var c = url.searchParams.get("c");
var utm_source = url.searchParams.get("utm_source");
var utm_campaign = url.searchParams.get("utm_campaign");
var utm_medium = url.searchParams.get("utm_medium");
$('a:not([href^="#"])').each(function() {
if(utm_source != "" && utm_source != null){
var href = $(this).attr("href");
href = href.replace(/(\?)utm[^&]*(?:&utm[^&]*)*&(?=(?!utm[^\s&=]*=)[^\s&=]+=)|\?utm[^&]*(?:&utm[^&]*)*$|&utm[^&]*/gi, '$1');
$(this).attr("href",href);
$(this).attr('href', $(this).attr('href') + '?utm_source=' + utm_source + '&utm_campaign=' + utm_campaign + '&utm_medium=' + utm_medium);
}
});
});
</script>
With JavaScript, to remove UTM parameters from links in page you can try this function with regex:
var link = document.getElementsByTagName("a");
for (var i = 0; i < link.length; i++) {
link[i].href = link[i].href.replace(/(\?)utm[^&]*(?:&utm[^&]*)*&(?=(?!utm[^\s&=]*=)[^\s&=]+=)|\?utm[^&]*(?:&utm[^&]*)*$|&utm[^&]*/gi, '$1');
}
If you are using Google Tag Manager you can add it in a custom HTML tag and fires it on DOM Ready.
If you want to keep the fragment in the URL you can modify the function in this way:
var link = document.getElementsByTagName("a");
for (var i = 0; i < link.length; i++) {
arr_link = (link[i].href).split("#");
var fragment = "";
if (arr_link[1]) { fragment = "#" + arr_link[1]; }
var my_new_url = arr_link[0].replace(/(\?)utm[^&]*(?:&utm[^&]*)*&(?=(?!utm[^\s&=]*=)[^\s&=]+=)|\?utm[^&]*(?:&utm[^&]*)*$|&utm[^&]*/gi, '$1');
link[i].href = my_new_url + fragment;
}
const ourUTMs = new URL(location.href).searchParams;
document.body.onclick = (e) => {
if (!isParamsContainsUTM(ourUTMs) || e.target.tagName !== "A") {
return;
}
try {
// Is valid url?, else we go to catch =)
const url = new URL(e.target.href);
e.preventDefault();
// Remove all utm params from link;
Array.from(url.searchParams).forEach(([k]) => {
if (k.startsWith("utm_")) {
url.searchParams.delete(k);
}
});
// Add our utm_ params to link
Array.from(ourUTMs).forEach(([k, v]) => {
url.searchParams.append(k, v);
});
// Open URL
window.open(url.toString());
} catch (e) {}
};
const isParamsContainsUTM = (arr = new URLSearchParams()) =>
Array.from(arr).some(([key]) => key.startsWith("utm_"));

Dynamic HTML tags work in Internet Explorer but do not work in Chrome

This code create dynamic path for my jquery functions
var cssElement;
var arrayCss = new Array;
arrayCss[0] = 'Content/themes/base/autocomplete_Scrollbar.css';
arrayCss[1] = 'Content/themes/base/all.css';
for (var i in arrayCss) {
cssElement = document.createElement('link');
cssElement.setAttribute('type', 'text/css');
cssElement.setAttribute('rel', 'stylesheet');
cssElement.setAttribute('href', createPath(arrayCss[i]));
document.head.appendChild(cssElement);
}
var element;
var cdn = new Array;
cdn[0] = 'Scripts/jquery-ui-1.11.4.min.js';
cdn[1] = 'Scripts/jquery-2.1.4.js';
cdn[2] = 'Scripts/jquery-ui-1.11.4.min.js';
cdn[3] = 'Scripts/jquery-plugin.js';
for (var i in cdn) {
element = document.createElement('script');
element.setAttribute('type', 'text/javascript');
element.setAttribute('src', createPath(cdn[i]));
document.head.appendChild(element);
}
This is ...
This code create dynamic path for my jquery functions
function createPath(name) {
var protocol = document.location.protocol;
var host = document.location.host;
var hostname = document.location.hostname;
var path = protocol + "//" + host + "/" + name;
return path;`//this return path
}
This is...

Searching an external URL for files with javascript

I am building a page that needs to be able to get a all the file links on a webpage and add them to a dropdown list. Original it was the script was supposed to be on the same page as the files but now it needs to search an external. This is what I used before the change
<script>
$(document).ready(function() {
var arr = [];
var filenames = [];
var alt_var;
var baseURL = "www.fakeurl.com"
$('.ms-vb-icon').find('a').each(function(){
var temp = $(this).attr('href')
$(this).find('img').each(function(){
alt_var = $(this).attr('alt');
});
if(temp.indexOf('.csv') != -1){arr.push(temp); filenames.push(alt_var);}
});
for(i = 0; i < arr.length; ++i)
{
var x = document.createElement('li');
var a = document.createElement('a');
var t = document.createTextNode(" " + filenames[i]);
var fullURL = baseURL + arr[i];
a.setAttribute('href',"#");
a.setAttribute('class', "glyphicon glyphicon-file");
a.setAttribute('id', baseURL + arr[i]);
a.setAttribute('onclick', "drawChart(this.id)");
a.appendChild(t);
x.appendChild(a);
document.getElementById("dropdownfiles").appendChild(x);
}
});
</script>
How can I change this to search an external url. (PS new to Javascript)
Not sure if this is the cleanest way but you could add a hidden iframe on the page and then search in there.
css:
.externalSearcher iframe {
display: none;
}
html:
<div class="externalSearcher"></div>
js:
$('.externalSearcher').append('<iframe src="' + externalLink + '"></iframe>');
$('.externalSearcher').find('a').each(function () {
//do what you want with the link
});

Javascript Regex first character after occurence

I have a pager with this url: news?page=1&f[0]=domain_access%3A3".
I need a regex to replace the page=1 with page=2
The 1 and 2 are variable, so I need to find page= + the first character after that.
How can I do that
#EDIT:
from the answers, I distilled
var url = $('ul.pager .pager-next a').attr("href");
var re = /page=(\d+)/i;
var page = url.match(re);
var splitPage = page[0].split("=");
var pageNumber = parseInt(splitPage[1]);
pageNumber += 1;
var nextPagePart = 'page=' + pageNumber;
var nextPageUrl = url.replace(re, nextPagePart);
$('ul.pager .pager-next a').attr("href", nextPageUrl);
There might be a shorter approach ?
Like this:
var url = 'news?page=1&f[0]=domain_access%3A3"';
var page = 2;
url = url.replace(/page=\d+/, 'page=' + page);
EDIT
To achieve what did in your edit:
var obj = $('ul.pager .pager-next a');
var url = obj.attr('href');
url = url.replace(/page=\d+/, 'page=' + (++url.match(/page=(\d+)/)[1]));
obj.attr('href', url);
If you want to replace only a page number and leave the rest You can try something like this:
s/\(.*\)page=\d{1,}\(.*\)/\1number_to_replace\2/

A very specify HTML/JS syntax error caused by un-matching tag

This line is breaking code highlighting in HTML/JS syntax highlighter in Gedit editor. This is a variable declared in the <script> tag:
var HTML_FRG6 = '"/></li>';
I know something's wrong with it, I just cant figure out what!
<!DOCTYPE html>
<html>
<head>
<title>News</title>
<link rel="stylesheet" href="css-js/jquery.mobile-1.0a2.min.css" />
<script src="css-js/jquery-1.4.4.min.js"></script>
<script src="css-js/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<script>
// constants
var COMMA = ',';
var EMPTY = '';
var REFRESH = 'refresh';
var LI = 'li';
var PAR = 'p';
var ID = 'id';
var ITEM = 'item';
var TITLE = 'title';
var CATEGORY = 'category';
var DESCR = 'description';
var CAT_ = 'cat_';
var _D = '_d';
var _LI = '_li';
var _A = '_a';
var GET = 'GET';
var XML = 'xml';
var HTML_FRG1 = '<li id="';
var HTML_FRG2 = '"><h3><a id="';
var HTML_FRG3 = '" href="#">';
var HTML_FRG4 = '</a></h3><p id="';
var HTML_FRG5 = '"></p><a href="#" data-transition="slideup" id="';
var HTML_FRG6 = '"/></li>';
var HTML_FRG7 = '<p>';
var HTML_FRG8 = '</p><hr></hr>';
var NEWS_URI = 'bridge.php?fwd=http://rss.news.yahoo.com/rss/';
var TWO_SECONDS = 2000;
</script>
</div>
</body>
</html>
Lines after var HTML_FRG6 = '"/></li>'; are not being highlighted. I wonder why?
My lucky guess would be that the var HTML_FRG6 = '"/></li>'; line contains only one " sign which is the last one in the script, so everything after this is considered string in code highlighting. If it's true, this is just Gedit highlighting error (the syntax is fine) and the solution would be ad-hoc lucky guess. One of these could help:
put var fix = '"'; after the line
put var fix = '""'; after the line
move the line one line above
Try using it like this
. var HTML_FRG6 = "/"/>";
Its the same thing but the " is escaped.

Categories

Resources