Add html entity by name with jQuery prop()

Question

I'd like to add an ellipsis to an input element's placeholder attribute with jQuery prop() but instead of the intended … I get literal string ….

How can I add html entities by name with jQuery prop()?

$(document).ready(function(){
 $('div#b input').prop('placeholder','Search&hellip;');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div id="a"><input type="text" placeholder="Search&hellip;" /></div><br />
<div id="b"><input type="text" /></div>

Interesting. It does the same thing using the native setAttribute method. — ccnokes, Jun 04 '15 at 02:20
The reason you get the HTML entity is that you are not working with HTML. You are working with the DOM API. Setting an attribute or prop won't invoke the HTML parser (expect of course for `innerHTML`). — Felix Kling, Jun 04 '15 at 02:21
@FelixKling, I'll admit It's pretty similar but a bit more specific. Vote to close if you feel so inclined - but I think both the question and the answers here add value to SO. — But those new buttons though.., Jun 04 '15 at 02:40

score 3 · Accepted Answer · answered Jun 04 '15 at 02:24

3

The simplest solution is to use the raw hex code instead of the named entity, as these are handled just fine by JS and the DOM API.

$(document).ready(function(){
 $('div#b input').prop('placeholder','Search\u2026'); // <- \u2026 is &hellip;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div id="a"><input type="text" placeholder="Search&hellip;" /></div><br />
<div id="b"><input type="text" /></div>

answered Jun 04 '15 at 02:24

Evan Davis

35,493
6
50
57

Yes! I knew there had to be an easy way.. now I just have to memorize all the hex codes ;-) – But those new buttons though.. Jun 04 '15 at 02:26
1

@billynoah why memorize anything you can [look up on wikipedia](http://en.wikipedia.org/wiki/List_of_Unicode_characters)? – Evan Davis Jun 04 '15 at 02:27
1

Yes I saw the winky-emoticon and forgot to add one in my response. (Still a useful link IMO!) – Evan Davis Jun 04 '15 at 02:29
Yes, very useful link. You should put it in your answer. – But those new buttons though.. Jun 04 '15 at 02:30
@billynoah Whoa, how is this better than my original answer? – Robert McKee Jun 04 '15 at 02:32
@RobertMcKee, I don't want non-ascii characters in my code. I didn't say it was better and I didn't downvote you. – But those new buttons though.. Jun 04 '15 at 02:37

score 1 · Answer 2 · edited May 23 '17 at 11:53

1

You have to invoke the HTML parser one way or the other. You could create a new element, set its HTML content and get its content as text:

$('div#b input').prop(
  'placeholder',
  $('<div />').html('Search&hellip;').text()
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="b">
  <input />
</div>

See HTML Entity Decode

edited May 23 '17 at 11:53

Community

1
1

answered Jun 04 '15 at 02:26

Felix Kling

795,719
175
1,089
1,143

Interesting approach... a bit much but actually does exactly what I asked more so than the accepted answer since it allows me to use html entities. Thanks. – But those new buttons though.. Jun 04 '15 at 02:41
Yeah, I wouldn't do that. Or at least I would have a helper function that only uses a single element for that, not creating one every time I need the conversion. But yeah, just literally answering the question ;) – Felix Kling Jun 04 '15 at 03:08

Robert McKee · Answer 3 · 2015-06-04T02:29:32.883

-1

Just type a horizontal ellipsis:

$(document).ready(function(){
 $('div#b input').prop('placeholder',$(document.createElement('div')).html('Search&hellip;').text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div id="a"><input type="text" placeholder="Search&hellip;" /></div><br />
<div id="b"><input type="text" /></div>

edited Jun 04 '15 at 02:29

answered Jun 04 '15 at 02:18

Robert McKee

21,305
1
43
57

That doesn't really answer my question. I'd like know how to add html entities by name since there are many things that can't be typed... at least not easily. – But those new buttons though.. Jun 04 '15 at 02:20
1

Well, to answer your question, you can't directly, because HTML entities are part of HTML, and the DOM doesn't know anything about HTML encoding really. – Robert McKee Jun 04 '15 at 02:24
@billynoah Well, here you go. Force the browser to convert the HTML entity for you. I guess that's easier if you can't remember how to type or insert html entities. – Robert McKee Jun 04 '15 at 02:30
1

For the record, I did not downvote this. It just wasn't what I was looking for. There are plenty of symbols and things I need to render on screen that I could copy and paste but I'd rather keep my code to strictly ascii. – But those new buttons though.. Jun 04 '15 at 02:36
2

I did too, but… BTW, hold down the ALT key, and type 0133 on the numeric keypad. Magic. – Robert McKee Jun 04 '15 at 02:40
@humble.rumble For you, try holding down control and shift and type u2026 -- less magical, but still magic! – Robert McKee Jun 04 '15 at 02:52
Dang it Windows®, you've done something cool that OS X and *nix don't do... who'd have guessed? – But those new buttons though.. Jun 04 '15 at 02:53
@humble.rumble Apparently only works in some apps. One day linux apps will standardize on one standard. – Robert McKee Jun 04 '15 at 15:05

Add html entity by name with jQuery prop()

3 Answers3