Text in hyperlink HTML - html

Question

I'm modifing an existing script to genearte an HTML file. Script puts a location (system path) under a hyperlink. But when I try to copy it from the html file, I get additional "https://" at the front of the text.
As example I see this printed in .html file
<td> ERROR massage. Please find the log here </td>
But when I do a right click -> copy link address from chrome I get this:
https://home/user/log
I'm not a web developer, so dont know if I use correct tags to get the job done. So, how can I get exactly the text I need?
Thanks

Answer 1

Probably a very farfetched solution, but in case you want to copy to clipboard the exact value of the href attribute of an anchor element, regardless of any uri schema where the page is getting loaded from and ignoring upfront the fact that probably such url should be encoded as file:// since it's clearly a filesystem path anyway,
a strategy to adopt could be to have an event triggering the appearence of an overlay that will show such information on top of the whole document and that will expect the click of the close button to return to the previous state.
The problem is that it's quite temerarious to change the clipboard data programmatically since there are security rules engaged that depends on too many conditions that we want to ignore here.
So all you would need to do if you are interested to such strategy, would be to add this code somewhere at the end of your document inside a <script> tag (and as long as js will be allowed to run in your page).
Here you have to hold the CTRL key while clicking the link, and an overlay will showup echoing the exact value coming from the href attribute of the link clicked. So that you can just copy by yourself in the clipboard. Of course you have to give focus to the document before trying to hold the CTRL key.
let ctrlKeyPressed = false;
document.querySelectorAll('a')
.forEach(anchor => {
anchor.addEventListener('click', e => {
if(ctrlKeyPressed){
e.preventDefault();
const overlay = document.createElement('div');
overlay.classList.add('overlay');
const container = document.createElement('div');
const urlSpan = document.createElement('span');
urlSpan.innerText = e.target.getAttribute('href');
container.appendChild(urlSpan);
container.innerHTML += '<br>';
const close = document.createElement('a');
close.innerText = 'close';
close.href = "#";
container.appendChild(close);
close.addEventListener('click', event=>{
event.target.closest('.overlay').remove();
});
overlay.appendChild(container);
document.body.appendChild(overlay);
}
});
});
document.addEventListener('keydown', e => {
if (e.ctrlKey && !ctrlKeyPressed){
ctrlKeyPressed = true;
console.log('holding ctrl key');
}
});
document.addEventListener('keyup', e => {
if (ctrlKeyPressed){
ctrlKeyPressed = false;
console.log('left ctrl key');
}
});
.overlay{
position: fixed;
display: flex;
justify-content: center;
left:0;
top:0;
width: 100%;
height: 100%;
z-index: 1;
border: solid black;
background: white;
font-size: 30px;
align-items: center;
}
.overlay > div {
text-align: center;
}
<td> ERROR massage. Please find the log here </td>