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
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

Incredible Demos

  • By
    CSS Vertical Center with Flexbox

    I'm 31 years old and feel like I've been in the web development game for centuries.  We knew forever that layouts in CSS were a nightmare and we all considered flexbox our savior.  Whether it turns out that way remains to be seen but flexbox does easily...

  • By
    Create a Quick MooTools Slideshow with Preloading Images

    I've been creating a lot of slideshow posts lately. Why, you ask? Because they help me get chicks. A quick formula for you: The following code snippet will show you how to create a simple slideshow with MooTools; the script will also...

Discussion

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