How to obtain consistent javascript prompt string and innerHTML

Question

I have a paragraph, which I would like to edit using javascript prompt function. All work ok while I didn't enter < or >. They looks good in html, but when I would like to edit them again, I see ugly > and <

The issues can be easy reproduced via following scenario:

1. press Edit-button,
2. Enter string <<<>>>.
3. press Edit-button again.

You will see ugly prompt symbols in dialog.

In prompt-dialog ugly un-escaped symbols appear.

In fact before passing innerHTML to prompt function I should un-escape characters, how could this be done?

Part of my code following:

<script type="text/javascript">
  function edit()
  {
    str = document.getElementById('par').innerHTML;
    str = prompt(str, str);
    document.getElementById('par').innerHTML = str;
  }
</script>


<p id="par">aaa</p>

<input type="button" onclick="edit()" value="Edit" />

I prefer API-function instead of manual replacing gt; an <.
jquery solution is also interseting for me.

Thanks!

Answer 1

If you really want just the textual content, then you should use the textual value rather than the innerHTML property.

In jQuery you can do this like so:

var paragraph = $("#par");
var stringValue = paragraph.text();
stringValue = prompt( "Please ammend your text", stringValue );
paragraph.text( stringValue );