String.prototype.link() is deprecated; is there a recommended alternative?

Community Help
1

Mozilla tells us that String.prototype.link() is deprecated. I found this to be a handy way to link array objects to create URLs in tables.

I haven’t found a similarly easy and short alternative. Any suggestions?

2

You could write a custom function:

link = (text, href) => {
  const link = DOM.element('a', { href })
  link.textContent = text
  return link
}
1 Like
3

Beautiful, Jed! Very short and perfectly clear. Thank you!

1 Like
4

Another version with optional escaping:

function link(text, href, escape = true) {
  return html`<a href="${href}">${escape ? DOM.text(text) : text}`;
}

Escaping is a good idea if you don’t have complete control over the text (i.e. you have neither authored nor vetted it). Disabling it will allow you to use formatting or even other HTML elements/nodes inside the text.

2 Likes
5

Nice addition, @mootari! Just to clarify — my initial version escapes the HTML.

1 Like
6

Of course, I should have emphasized “optional”! :blush:

Edit: Btw, I found that in the above example I didn’t need to escape the attribute value. All my attempts at breaking the resulting markup failed. I’m not quite sure yet why that is though.

1 Like
7

Turns out I didn’t test properly. Attribute values do need to get escaped:

1 Like
8

I’m trying to use this function, but it tells me that the DOM is not defined. Can u help me? Thanks!

9

It sounds to me like you’re working outside of Observable. DOM is part of the Observable standard library so, if you’re using Observable, then DOM should be defined. (Unless you’ve explicitly redefined DOM to null or some such.)

If you’re simply trying to create a function that creates a link in a vanilla Javascript environment, then it’s probably simplest to use document.createElement; something like the following should work:

function link(text, href) {
  let a = document.createElement("a");
  a.textContent = text;
  a.href = href;
  return a;
}
10

@palmoon Can you please create a new topic and share a link to your notebook? Thank you!