I have a text field called 'patentURL' in a form. The user enteres the complete URL into this field while saving the record. When the user searches for this record, the entered URL should be clickable. i.e. in the result page, the entered URL should be clickable.
How do I achieve this using Javascript?
There is a non-standard function, but widely spread - link() MDC
function makeClickable(url) {
return String.prototype.link ? url.link(url) : ''+url+'';
}
function makeDOMClickable(url) {
var link = document.createElement('a');
link.href = url;
link.innerHTML = url;
return link;
}
var url = "http://localhost";
document.write ( makeClickable ( url ) );
document.body.appendChild ( makeDOMClickable ( url ) );
demo
If i understood correctly you should put the url in a link:
URL_ENTERED
With javascript:
var link = document.createElement('a');//create link
link.setAttribute('href', 'URL_ENTERED');//set href
link.innerHTML = 'URL_ENTERED';//set text to be seen
document.body.appendChild(link);//add to body
You can use javascript regular expression to achieve this have a look
function convert()
{
var text=document.getElementById("url").value;
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
var text1=text.replace(exp, "<a href='$1'>$1</a>");
var exp2 =/(^|[^\/])(www\.[\S]+(\b|$))/gim;
document.getElementById("converted_url").innerHTML=text1.replace(exp2, '$1<a target="_blank" href="http://$2">$2</a>');
}
this way you can convert any text into link you can find more detail here http://talkerscode.com/webtricks/convert-url-text-into-clickable-html-links-using-javascript.php
Example to call href in Javascript:
function call_link() {
location.href = 'www.google.com';
}
Related
At a page like
https://www.example.com/?firstname=Steven&lastname=Smith&email=steve%40gmail.com&phone=0404555555
I have a button (anchor link) #ptsBlock_553944 .ptsCell:nth-of-type(1) .ptsEditArea.ptsInputShell that links to https://www.example.com/form
I'd like to append the URL parameters from the current URL to the button's URL, so that the button's href is now https://www.example.com/form/?firstname=Steven&lastname=Doig&email=steve%40gmail.com&phone=0404555555
How can I do this with JavaScript please?
Use window.location.search:
var url = "https://exmaple.com";
var newurl = url + window.location.search;
newurl will contain all the get (ex. ?something=something&something2=something5) data.
To change the href of a:
var button = document.getElementById('#ptsBlock_553944');
button.href = button.href + window.location.search;
If you don't care about supporting older browsers you can use the URL API and URLSearchParams.
function appendCurrentUrlSearchParams(anchorElement) {
const currUrlSearchParams = new URL(window.location.href).searchParams;
const link = new URL(anchorElement.href);
// uncomment this line if you want to clear query parameters already present in the anchor url
// link.search = '';
for (const entry of currUrlSearchParams.entries()) {
link.searchParams.append(entry[ 0 ], entry[ 1 ]);
}
anchorElement.href = link.href;
}
Usage in your case:
appendCurrentUrlSearchParams(document.querySelector('#ptsBlock_553944 .ptsCell:nth-of-type(1) .ptsEditArea.ptsInputShell'));
Read Html select using select to change the link of a button with Javascript
specifically the section on
Get the element with something like document.getElement MDN getElement Link
Change the .href of that element to what you want.
function selectFunction() {
var x = document.getElementById("selectopt").value;
document.getElementById("mylink").innerHTML = x;
document.getElementById("mylink").href = "http://www." + x + ".com";
}
document.location.pathname = '/questions/69240453/appending-
current-url-parameters-onto-anchor-link/69240510';
//get the document pathname I chose from document.location
let data = document.location.pathname;
let preUrlString = 'www.example.com/form';
let newString = preUrlString + data;
console.log(newString);
'www.example.com/form/questions/69240453/appending-
current-url-parameters-onto-anchor-link/69240510'
document.getElementById("mylink").href = newString;
Am using bootstrap modal on my site, everything a modal is open it will add url has using the modal element id and a data i passed.
My problem is how do i remove the last added hash when a button is clicked just like when browser back button is click window will navigate back removing last hash.
How do i remove last url location has accordingly using javascript, i want every time a button is clicked the last hash from the list of url hash will be removed.
function ensureHash(newHash){
var lochash = location.hash;
if(lochash || lochash != ""){newHash = lochash + "&" + newHash;}
if (window.location.hash) {
return window.location.href.substring(0, window.location.href.lastIndexOf(window.location.hash)) + newHash;
}
return window.location.hash + newHash;
}
window.location.href = ensureHash("modalElementId=modalAction");
https://example.com/app?#mElem1=mAcct1&#mElem2=mAcct2&#mElem4=mAcct5
I tried doing this but it doesn't work well
function ensureRemoveHash(){
var gethash = location.hash;
gethash = gethash.slice(0, gethash.lastIndexOf('&'));
return gethash;
}
window.location.href = ensureRemoveHash();
Something like this?
var str = "https://example.com/app?#mElem1=mAcct1&#mElem2=mAcct2&#mElem4=mAcct5"
function dropHash(str) {
if (str.indexOf("#") ==-1) return str;
var arr = str.split("#");
arr.pop();
return arr.join("#");
}
console.log(str);
str = dropHash(str)
console.log(str);
str = dropHash(str)
console.log(str);
str = dropHash(str)
console.log(str);
Or do you just have the button replace the hash?
var url = new URL("https://example.com/app")
console.log(url);
url.hash="mElem2=mAcct2"
console.log(url);
url.hash="mElem3=mAcct3"
console.log(url);
I'm fairly new to JavaScript and I have this RSS Feed I'm working with currently.
When I retrieve an item from the RSS feed, the following is displayed
Google Home Page http://www.google.com
How can I split this string, so that I can embed the second part of it (http://www.google.com) into the first part(Google Home Page)?
First - exclude the link by using following RegEx pattern (searches for string which starts with http://).
/http:\/\/.*[^\W+]/g
The matched value (Array) is being stored into url, now we are able to create the anchor element. (the value of href is the element 0 inside our matches array).
The link content is being generated by replacing the URL with empty space inside the retrievedResult. trim() is optional, I've used it just to remove remaining space.
retrievedResult.replace(url[0], "").trim()
Finally you can append the built anchor element.
var retrievedResult = "Google Home Page http://www.google.com";
var re = /http:\/\/.*[^\W+]/g;
var url = retrievedResult.match(re);
var anchor = '' + retrievedResult.replace(url[0], "").trim() + '';
$('body').append(anchor);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Okay, so this will be the string:
var string = "Google Home Page http://www.google.com";
Then we split it:
var split = string.split('http'); // ['Google Home Page ', '://www.google.com']
Then we create an a element:
var a = document.createElement('a');
Then we add the link as the href attribute of your anchor element:
a.href = 'http' + split[1];
And then we add the text as textContent of your anchor element:
a.textContent = split[0];
And finally we add the element to the body:
document.body.appendChild(a);
Here an example:
var string = "Google Home Page http://www.google.com";
var split = string.split('http');
var a = document.createElement('a');
a.href = 'http' + split[1];
a.textContent = split[0];
document.body.appendChild(a);
You can use jquery to get to your result
Working Example:
//This is HTML part
<div id="linkcontainer"></div>
<input id="str" value='Google Home Page http://www.google.com'>
<a id="createlink">CreateLink</a>
//This is js part
$('#createlink').click(function(){
createLink();
});
//function that makes link
function createLink(){
var str = $('#str').val();
var http = str.indexOf('http');
var url = str.substring(http);
var text = str.substring(0,http);
$('#linkcontainer').html(''+text+'');
}
Try this code on jsfiddle
I'm trying to figure out how to get the second slash or page of a website using the document.referrer javascript
for example the website is www.mysite.com/page1/subpage/subpage2/
I only need to get www.mysite.com/page1/
var url = document.referrer;
var referrer = url.match(/:\/\/(.[^/]+)/)[1];
this only gets me the domain. I need the second page. Any help would be great.
Thanks
Hope this does what you need:
function getReferrerSecondPage() {
var link = document.createElement("a");
link.href = document.referrer;
return link.pathname!="" ? [link.host, link.pathname.split("/")[1]].join("/") : link.host;
}
var referrerSecondPage = getReferrerSecondPage();
Modified your code:
var url = document.referrer;
var referrer = url.match(/(http:)\/\/(.[^/]+)\/([^./]+)/)[0];
// Display
var foo = document.getElementById("foo");
foo.innerHTML = referrer + "/";
<p id="foo"></p>
I am using Vanilla 2 as forum with buttonbar plugin to create pre tags in the message area.
When clicking on the url button, he generates in the message box, but I would prefer <a href="" target="_blank></a> to generate.
Here is is the .js with the case for the url attribute:
case 'url':
var urlOpts = {};
var thisOpts = $.extend(htmlOpts, {
center: 'href'
});
var hasSelection = $(TextArea).hasSelection();
var NewURL = '';
if (hasSelection !== false) {
NewURL = hasSelection;
delete thisOpts.center;
} else
NewURL = prompt("Enter your URL:",'http://');
urlOpts.href = NewURL;
$(TextArea).insertRoundTag('a',thisOpts,urlOpts);
break;
Can someone tell me how to add the target="_blank" in it?
It seems to be solved so maybe here could be useful for anyone:
I don't know exactly the technologies u are using but have u tried with
urlOpts.target = '_blank';
before
$(TextArea).insertRoundTag('a',thisOpts,urlOpts);