Format the text in JavaScript alert box

Question

How can I format the text in a JavaScript alert box? I need a word in the text to be underlined.

score 41 · Answer 1 · edited Jun 20 '20 at 09:12

41

You can use only:

\b = Backspace 
\f = Form feed 
\n = New line 
\r = Carriage return 
\t = tab
\000 = octal character 
\x00 = hexadecimal character 
\u0000 = hexadecimal unicode character

So, you can insert different ASCII characters, but not format them (like italic or bold).

EDIT I also have to mention, that in fact alert acts like toString conversion, so including tags and/or styles is not possible.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 04 '13 at 13:08

vladkras

16,483
4
45
55

You can underline with unicode character `'\u0332'`; `alert('h̲e̲l̲l̲o̲');` (might not come out as a solid line, though) – Paul S. Jul 04 '13 at 13:21
@PaulS. [yep](http://jsfiddle.net/vladkras/xKAyH/), but it's not underline anyway – vladkras Jul 04 '13 at 14:10
1

It's possible to do some interesting stuff with those [hexa numbers](https://www.w3schools.com/charsets/ref_utf_geometric.asp) – brasofilo Jul 12 '18 at 06:16
Thanks, but I'm curious what you're expecting [`\f`FormFeed](https://en.wikipedia.org/wiki/Page_break#Form_feed) to accomplish within an `alert`? – ashleedawg Jun 13 '19 at 19:46

score 9 · Answer 2 · edited May 04 '18 at 00:54

9

Underline a string using unicode character '\u0332', called a COMBINING LOW LINE

function underline(s) {
    var arr = s.split('');
    s = arr.join('\u0332');
    if (s) s = s + '\u0332';
    return s;
}

var str = underline('hello world'); // "h̲e̲l̲l̲o̲ ̲w̲o̲r̲l̲d̲"

alert(str);

This method is not guaranteed to produce a smooth underline.

Example of confirm() on Firefox 59:

edited May 04 '18 at 00:54

Vitaly Zdanevich

13,032
8
47
81

answered Jul 04 '13 at 13:25

Paul S.

64,864
9
122
138

I needed this for a prompt box to underline the Y in Yes. `Y\u0332es`. Thank you. I've just tested `var str = underline(underline('hello world'));` and it makes the underline double up if that's what anyone is after. You can also give it 3 etcetera like so: `var str = underline(underline(underline('hello world')));` – Ste Mar 28 '21 at 16:43

score 4 · Answer 3 · edited Jul 12 '18 at 05:14

4

You can not style the text inside an alert box. But you can use a modal box solution instead, here's a list to get you started:

edited Jul 12 '18 at 05:14

brasofilo

25,496
15
91
179

answered Jul 04 '13 at 13:00

Igor

174
5

score 2 · Answer 4 · edited Jul 12 '18 at 05:09

In my case I created internationalization through a JavaScript file. I needed a mnemonic on each button so I was looking for an easy solution. Actually, I've an easy approach to get the wanted result:

\u0332 is the Unicode Character COMBINING LOW LINE

With this character you can underline single letters.

Demonstration:

alert('S\u0332earch - s underlined');

i18n = {};

i18n.SEARCH = "S\u0332earch - s underlined";

document.getElementById('search').innerHTML = i18n.SEARCH;

<button id="search"></button>

score 2 · Answer 5 · edited Jun 27 '23 at 12:40

Update: Browsers have started to disable Unicode support in their native dialogs, so this is a dead end.

As two answers suggest the solution is to use Unicode, but you have to do this properly! I also wanted a more reusable solution where I would not need to reinvent the wheel each and every time. So I came up with this small JavaScript function for convenience.

alert('Really need to alert some '+toUnicodeVariant('underlined', 'bold sans', 'underline')+' text');

<script src="https://rawgithub.com/davidkonrad/toUnicodeVariant/master/toUnicodeVariant.js"></script>

Should produce something like this in all major browsers (try run the code snippet above) :

score 1 · Answer 6 · answered Jul 04 '13 at 12:58

1

You can't. Use external lib as JQuery UI Dialog or your own implementation.

answered Jul 04 '13 at 12:58

Sirus64

46
4

score -1 · Answer 7 · answered Jul 04 '13 at 12:56

-1

This is not possible. You'd have to use a plugin. If you have jQuery installed there's a bunch to choose from. If not this one looks promising: http://simplemodal.plasm.it/#examples

answered Jul 04 '13 at 12:56

Bill Criswell

32,161
7
75
66

Format the text in JavaScript alert box

7 Answers7

Linked