How to add placeholders to strings in javascript

Question

I'd like to be able to set default placeholders for string really easily like this

someString.placeholder("waiting for text")

Which could be used like this...

$("p.some-class").html( someString.placeholder("waiting for text") );

so if 'someString' is empty, the user sees "Waiting for text", but if the string has a length greater than 0, they see the actual string.

I've tried to extend the String object like this

String.prototype.placeholder = function(placeholder){

    return (this.length > 0) ? 
    this : 
    "<span class=\"placeholder-string\">" + placeholder + "</span>";

}

but that doesn't appear to be working. Any thoughts anyone?

Here's a JSFiddle for anyone who's interested.

Why? Because I want to style it with css. So placeholders are knocked back a bit. — gargantuan
– gargantuan, Commented Oct 18, 2011 at 14:53
How about using a logical OR: someString || "waiting for text" ? — Felix Kling
– Felix Kling, Commented Oct 18, 2011 at 14:54
The placeholder method you defined is called placeholder not placeHolder. I can't see any other problems with it. — Matt
– Matt, Commented Oct 18, 2011 at 14:54
placeholders for what? how the heck are they putting text in? some context and html maybe? and a demo too? — Naftali
– Naftali, Commented Oct 18, 2011 at 14:54

pimvdb · Accepted Answer · 2011-10-18 15:03:57Z

1

It appears that this is a String object, not the primitive version. You'd have to convert it into a primitive. Also you can eliminate > 0:

String.prototype.placeholder = function(placeholder){

    return this.length ? 
    this + "" : 
    "<span class=\"placeholder-string\">" + placeholder + "</span>";

}

answered Oct 18, 2011 at 15:03

pimvdb

155k80 gold badges313 silver badges357 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add placeholders to strings in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related