Legacy String Methods for Generating HTML

By  on  

I'm always really excited to see new methods on JavaScript primitives. These additions are acknowledgement that the language needs to evolve and that we're doing exciting new things. That being said, I somehow just discovered some legacy String methods that you probably shouldn't use but have existed forever. Let's take a look!

These legacy string methods take a basic string of text and wrap it in a HTML tag of the same name:

"Hello".big() // "<big>Hello</big>"
"Hello".blink() // "<blink>Hello</blink>"
"Hello".bold() // "<b>Hello</b>"
"Hello".italics() // "<i>Hello</i>"
"Hello".link("https://davidwalsh.name") // "<a href="https://davidwalsh.name">Hello</a>"

Native prototypes don't usually remove methods and for good reason -- they can break websites! I'm shocked I didn't know about these methods before today. It's always fun to see relics of the web past though!

Recent Features

  • By
    5 More HTML5 APIs You Didn&#8217;t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

  • By
    Chris Coyier&#8217;s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Incredible Demos

  • By
    HTML5&#8217;s placeholder Attribute

    HTML5 has introduced many features to the browser;  some HTML-based, some in the form of JavaScript APIs, but all of them useful.  One of my favorites if the introduction of the placeholder attribute to INPUT elements.  The placeholder attribute shows text in a field until the...

  • By
    Table Cell and Position Absolute

    If you follow me on Twitter, you saw me rage about trying to make position: absolute work within a TD element or display: table-cell element.  Chrome?  Check.  Internet Explorer?  Check.  Firefox?  Ugh, FML.  I tinkered in the console...and cussed.  I did some researched...and I...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!