Multiple Replace strings in href sharing the same class - javascript

Hello I am trying to replace the href of three hyperlinks. Which I can do with the following code:
var url = $('.contact_link').attr('href');
url = url.replace('http://www.contact.nl/', '/');
$('.contact_link').attr('href', url);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Privacypolicy | Privacy statement |
Copyright test| Contact
Which result in a change of each hyperlink containing the contact_link class. But each hyperlink is only updated with the first href. So each hyperlink now contains the URL: "/Privacypolicy.aspx"
How could I achieve that each URL is updated with their corresponding href?

You can use each
$('.contact_link').each(function() {
var url = $(this).attr('href');
url = url.replace('http://www.contact.nl/', '/');
$(this).attr('href', url);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Privacypolicy | Privacy statement |
Copyright test| Contact

Related

Replace all plain text links with href and remove https, https and www

I am trying to replace all plain links with hrefs and remove the beginning part of the url.
The current code I am working with finds https and http links and replaces them, but it doesn't work with www. plain links.
var links = $('#links').text();
var formatText = links.replace(/((http|https|www):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g, '$1<br>');
$('#links2').html(formatText);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="links">
https://www.example.com/<br>
https://www.example.com/blah/blah/<br>
http://www.example.com/<br>
http://www.example.com/blah/blah<br>
www.example.com/<br>
www.example.com/blah/blah
</div>
<br>
<div id="links2"></div>
I would also like the https, http and www. removed from the link text aswell, for example:
example.com/
example.com/
Does anyone know how?
You can use
/^.*?\.(.*)/
If you want the original link in the href attribute then you can use ${link} or if you want the link with domain only then you can use ${group}
const links = [
"https://www.example.com/",
"https://www.example.com/blah/blah/",
"http://www.example.com/",
"http://www.example.com/blah/blah",
"www.example.com/",
"www.example.com/blah/blah",
];
const result = links.map((link) =>
link.replace(/^.*?\.(.*)/, (...args) => {
const [, group] = args;
return ` ${group}<br>`;
})
);
console.table(result);

How to get the wildcard in the URL and apply argument to a link

Hello I am super new to building websites. Please excuse my lacking terminology!!
I have a website that has Wildcard sub-domains. It is using this script to pull the wildcard sub-domains usernames.
<p id="dist-info"></p>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
return;
var get_data_url = 'https://backoffice.WEBSITE.com/api/v2/public/users/{username}';
$.getJSON(get_data_url, function( data ) {
var dist_info = "<p>"+data.response['first-name']+"</p>" +
"<p>"+data.response['last-name']+"</p>" +
"<p>"+data.response['distributor-id']+" "+data.response.email+"</p>" +
"<p>"+data.response['image-url']+"</p>" +
"<p>Phone: "+data.response.phone+"</p>";
$('#dist-info').html(dist_info);
});
});
</script>
Now I need to make a URL that will parse the username/user id out of the Wildcard Subdomain page. What code do I need to use?
For example
The URL is
USERNAME.WEBSITE.com/page/subpage/
I need to make this URL
backoffice.WEBSITE.com/page?sponsor-id=USERNAME
What do I need to do so that the username from the first page is parsed out and applied to the link of the second URL
You want to modify this JavaScript so it uses the subdomain instead of {username}?
$(document).ready(function() {
var get_data_url = 'https://backoffice.WEBSITE.com/api/v2/public/users/';
var hostname_parts = location.hostname.split('.');
var username = hostname_parts.shift();
// add username to the data URL
get_data_url += username;
// add username to some link on the website
var $aTag = $('#id-of-the-link');
var link_url = $aTag.attr('href');
link_url += username;
// set the new href attribute
$aTag.attr('href', link_url);
location.hostname gives you USERNAME.WEBSITE.com, split() splits it into parts separated by a dot. shift() takes the 1st element of this array (you could also use hostname_parts[0]) and with += you concatenate it to the URL.
The second example shows how to add the username at the end of a link like
click
Edit: added example for changing a href attribute

pass iframe src from one html page to another

I have two html webpages. One page has a 'div' named "iframe-content" .
When I click on the div, it should set the iframe src in the second html page.
Page 1:
<div class="iframe-content" onclick="passIframe()">
//div which should set the iframe src on the other page on clicking
</div>
Page 2:
<iframe src="about:blank" id="native-iframe" width="450" height="180"scrolling="no">
//The iframe which should obtain the source from the first page
</iframe>
Whenever I click the "iframe-content" ,it should open the html page 2 and it should also set the "native-iframe" source as I wish.
Is there any efficient way to do it?
You can send the url as a query parameter and on page2, you can read and set it to the iframe. Something like this:
// Page1:
function passIframe() {
var url = ""; // The url to pass
window.location.href = "/page2.html?url=" + url;
}
// Page2:
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var src= getParameterByName("url");
$("iframe").attr("src", url);
Note: the getParameterByName is just a function to get the query string parameter from the URL. I copied this function from this Stackoverflow question, but there are many other solutions to do this task.
YOu can set iframe src attribute to your desired url
$('iframe').attr('src', url)

URL redirection issue

URL redirection is not working i.e
I am using filter for replacing string which match with my anchor tag.
DEMO
Controller
var app = angular.module('app', ['ngSanitize']);
app.filter('parseUrlFilter', function ($sce) {
var urlPattern = /(^|\s)((https?:\/\/)?[\w-]+(\.[\w-]+)+\.?(:\d+)?(\/\S*)?)/gi;
return function (text, target, otherProp) {
text = text.replace(urlPattern, '<a target="' + target + '" href="$&">$&</a>');
return $sce.trustAsHtml(text);
};
});
function Ctrl($scope) {
$scope.text = 'Example text http://example.com http://example.com http://google.com google.com';
}
HTML
<div ng-controller="Ctrl">
<p ng-bind-html="text | parseUrlFilter:'_blank'"></p>
</div>
My problem is when url having http or https then it redirect us correctly to respective page i.e if "http://google.com" it works properly. But if
http or https is missing then it does not work properly i.e if google.com it doesn't redirect to google.com instead it redirect to localhost/folder/google.com.

How can I append "?new_page=2" to a URL within javascript? It seems the question mark isn't allowing me to parse

My original code which works is this:
function changeURL() {
var theURL = location.pathname;
var newURL = theURL.replace("/page1/", "/page2/");
return newURL;
}
$('.currentpagediv').load(changeURL() + ' .secondpagedivclass');
Basically, per How can I dynamically add a URL into javascript, to get a second page's div to display on the first page?, I am trying to add new content from second page into the first page.
However, Now I am trying to also add the SECOND PAGE of the second page into the first page, because the way it is set up, it shows page 1, 2, 3, 4, 5 etc pagination at the bottom. I am trying to also show the other pages in the same page.
For example,
<html>
<body>
<div class="currentpagediv">
</div>
<div class="secondpagedivclass">
[CONTENT HERE]
Page 2, Page 3, Page 4, etc.
</div>
</body>
</html>
But I want:
<html>
<body>
<div class="currentpagediv">
</div>
<div class="secondpagedivclass">
[CONTENT HERE]
[Page 2 Pagination Link CONTENT HERE]
[Page 3 Pagination Link CONTENT HERE]
[Page 4 Pagination Link CONTENT HERE]
[etc.]
</div>
</body>
</html>
Original URL that I am inserting, looks like this:
http://theurl.com/page2/somethingsomewhere.html
The pagination pages look like this:
http://theurl.com/page2/somethingsomewhere.html?new_page=2
http://theurl.com/page2/somethingsomewhere.html?new_page=3
etc.
Here is the code I tried first that does not work:
$('.currentpagediv').load(changeURL() + ' .secondpagedivclass' + '?new_page=2');
But I learned it does not work because you can't parse the question mark. I read that instead I should use .search to parse the new page. So I tried this:
function changeURL() {
var theURL = location.pathname;
var newURL = theURL.replace("/page1/", "/page2/");
return newURL;
}
function secondPage() {
var secondURL = changeURL()
var secondnewURL = secondURL.search('new_page', 2);
return secondnewURL;
}
$('.currentpagediv').load(secondPage() + ' .secondpagedivclass');
In the above code, the only difference from the original working code is the addition of the secondPage() function, and adding that function after .load(.
In the code above, I tried to:
fetch the url of current page
modify the url, and then
append ?new_page=2 to the end of the new url, and
add the function secondPage() to create the URL

Categories

Resources