How to use javascript to get html special characters in text input

Question

I want to sent some html special character to text field and then later use javascript to get it back in its original format: like if I sent "&pi", it will shows "π" on the text input, and when I use javascript to get it back, I should get "&pi", but I only can get "π", not "&pi". Please help, my code is like the following:

<script type="text/javascript"> 
function qpush(a) {
    document.getElementById('input').value += a;
}

function show(a) {
    alert(document.getElementById('input').value);
}
</script>

<input type="text" id="input" />
<input type="button" onclick="qpush('&pi;');" value="&pi;" />
<input type="button" onclick="show()" value="go" />

Lior · Accepted Answer · 2012-08-26 17:56:13Z

3

Depending on what you need the it for you could do one of 3 options:

use the javascript escape and unescape functions:

var escaped = escape('π') // escaped = "%u03C0" which unescape will turn back into π
If you have jQuery available it's html method might do the trick:

$('input').val().html()
This is a hack but will work: Save a copy of the value the way you want it returned on a 'data-' attribute of the input element, this will validate in html5 and won't break in other doctypes.

document.getElementById('input').setAttribute('data-originalValue', '&pi')

edited Aug 26, 2012 at 17:56

answered Jul 17, 2012 at 8:45

Lior

1,61817 silver badges21 bronze badges

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

2 Comments

kli Over a year ago

Thank you for the help, I use escaped form for data, and unescaped form for display, it works okay.

Lior Over a year ago

Cool, I'm glad to be of help :)

Quentin · Accepted Answer · 2012-07-17 08:44:53Z

1

The value property will give you text, not HTML.

~~You could try getAttribute('value') but since π and π are identically equivalent in HTML, a browser is entirely free to return π for that too.~~

~~Once the HTML has been converted into a DOM, there is no way to access the original HTML (short of downloading the HTML again with XHR and parsing the raw text of it yourself).~~

If you want the data to be "π" then the HTML for it needs to be &pi;.

If you want that and the rendering on the button to be π then you need:

<button type="button" value="&amp;pi;">π</button>

(Keeping in mind the various bugs that old-IE has with the button element)

That will, of course, display π when you copy the value to the text input.

edited Jul 17, 2012 at 8:44

answered Jul 17, 2012 at 8:11

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

2 Comments

kli Over a year ago

Thank you for your help, but document.getElementById('input').getAttribute('value') return null.

Quentin Over a year ago

Oh, missed that this was a different element you were getting the value from. getAttribute returns the attribute value (which is the default value of the input) not the current value.

Christoph · Accepted Answer · 2012-07-17 08:22:09Z

-1

Use this to replace all occurrences of the character:

document.getElementById('input').value.replace(/π/g,"&pi;");

answered Jul 17, 2012 at 8:22

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

3 Comments

kli Over a year ago

nice workaround, but I need to make it for all special chars, not just π.

Christoph Over a year ago

@KelvinLi You could maintain an array of special entity mappings running the replace over.

kli Over a year ago

I tried, but it looks like replace() cannot use for very special chars like π.

Collectives™ on Stack Overflow

How to use javascript to get html special characters in text input

3 Answers 3

2 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related