Is it possible to set href attribute to an arbitrary string, not beginning with http?

Question

I would like to set a HTML href attribute of an <a> tag to an arbitrary text, to provide it for the visitor for copying it to the clipboard by "copy link location" context menu. Is it possible to set an <a> tag href attribute to that arbitrary string, which doesn't start with http or any other schemes, like ftp?

yes you can provide schema less URL. – Ranjit Singh May 19 '16 at 08:22 — Ranjit Singh, May 19 '16 at 08:22

score -1 · Answer 1 · answered May 19 '16 at 08:31

You can set the attribute value to an arbitrary string, but when the user selects "Copy Link Location" it will take that string, resolve it as a URL and then return an absolute URL. If the string doesn't start with a URL scheme then it will be treated as a relative URL and given one.

score -1 · Answer 2 · answered May 19 '16 at 08:31

Here are the possible values an href attribute can contain:

An absolute URL - points to another web site (like href="http://www.example.com/default.htm")
A relative URL - points to a file within a web site (like href="default.htm")
Link to an element with a specified id within the page (like href="#top")
Other protocols (like https://, ftp://, mailto:, file:, etc..)
A script (like href="javascript:alert('Hello');")

score -1 · Answer 3 · edited May 23 '17 at 11:52

Well yes you can set the href attribute to anything you like, but "copy link location" will always resolve this to a full URL, so it won't work. For example if you are on a page "http://www.example.com/about" and you set the href to "foo", when the user copies the link, it will actually copy "http://www.example.com/foo".

A better option would be to use JavaScript to execute the copy command built into most browsers, like the example below. See this question for more details.

$('.copy').each(function() {
  var $this = $(this);
  var copyText = $this.text();

  var copyButton = $('<span class="copyButton">Copy</span>');
  copyButton.on('click', function() {
    copyTextToClipboard(copyText);
  })

  $this.append(copyButton);
})

// copied from https://stackoverflow.com/a/30810322/1901857
function copyTextToClipboard(text) {
  var textArea = document.createElement("textarea");

  //
  // *** This styling is an extra step which is likely not required. ***
  //
  // Why is it here? To ensure:
  // 1. the element is able to have focus and selection.
  // 2. if element was to flash render it has minimal visual impact.
  // 3. less flakyness with selection and copying which **might** occur if
  //    the textarea element is not visible.
  //
  // The likelihood is the element won't even render, not even a flash,
  // so some of these are just precautions. However in IE the element
  // is visible whilst the popup box asking the user for permission for
  // the web page to copy to the clipboard.
  //

  // Place in top-left corner of screen regardless of scroll position.
  textArea.style.position = 'fixed';
  textArea.style.top = 0;
  textArea.style.left = 0;

  // Ensure it has a small width and height. Setting to 1px / 1em
  // doesn't work as this gives a negative w/h on some browsers.
  textArea.style.width = '2em';
  textArea.style.height = '2em';

  // We don't need padding, reducing the size if it does flash render.
  textArea.style.padding = 0;

  // Clean up any borders.
  textArea.style.border = 'none';
  textArea.style.outline = 'none';
  textArea.style.boxShadow = 'none';

  // Avoid flash of white box if rendered for any reason.
  textArea.style.background = 'transparent';


  textArea.value = text;

  document.body.appendChild(textArea);

  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }

  document.body.removeChild(textArea);
}

a.copy {
  position:relative;
}

a.copy .copyButton {
  display:none;
  position:absolute;
  left:100%;
  top:0;
  background-color:gray;
}

a.copy:hover .copyButton {
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Click the button to <a class="copy" href="#">copy the text</a> in this div.</div>

Is it possible to set href attribute to an arbitrary string, not beginning with http?

3 Answers3