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-26T17:56:13.170

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 '12 at 17:56

answered Jul 17 '12 at 08:45

Lior

1,599
17
21

Thank you for the help, I use escaped form for data, and unescaped form for display, it works okay. – kli Jul 18 '12 at 18:32
Cool, I'm glad to be of help :) – Lior Aug 26 '12 at 17:53

Quentin · Answer 2 · 2012-07-17T08:44:53.217

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 '12 at 08:44

answered Jul 17 '12 at 08:11

Quentin

914,110
126
1,211
1,335

Thank you for your help, but document.getElementById('input').getAttribute('value') return null. – kli Jul 17 '12 at 08:40
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. – Quentin Jul 17 '12 at 08:44

score -1 · Answer 3 · answered Jul 17 '12 at 08:22

-1

Use this to replace all occurrences of the character:

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

answered Jul 17 '12 at 08:22

Christoph

50,121
21
99
128

nice workaround, but I need to make it for all special chars, not just π. – kli Jul 17 '12 at 08:35
@KelvinLi You could maintain an array of special entity mappings running the replace over. – Christoph Jul 17 '12 at 09:00
I tried, but it looks like replace() cannot use for very special chars like π. – kli Jul 17 '12 at 17:01

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

3 Answers3