• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 6341
  • Last Modified:

How to escape or replace apostrophe and quotation mark in javascript variables?

I have an ASP.NET web page with javascript that manipulates variables that may contain apostrophes and quotation marks. As you might imagine, these characters are causing script errors because they are terminating the string. I tried escaping them with this function:

function escapeCharacters(str)
{
      str = str.replace(/""/g, '\\""');
      str = str.replace(/'/g, ""\\'"");
      return str;
}

This improves things but still causes issues in certain scenarios. (Specifically, the javascript within the ComponentArt Grid control's client templates do not seem to be respecting the escaped quotation mark.)

Is there a more reliable way to escape these characters? Or perhaps another approach is warranted - how about replacing the apostrophe and quotation mark with two benign characters that always play nice? But which characters? I need to round trip the values so I need to choose two characters that won't ever be legitimately present. This is an international application where a wide variety of languages may be present.
0
rdogmartin
Asked:
rdogmartin
  • 2
  • 2
2 Solutions
 
fsze88Commented:
try this
<script type="text/javascript">

function escapeCharacters(str)
{
      str = str.replace(/"/g, '\\\"').replace(/\'/g, "\\'");
      return str;
}
//document.write('abc"def\'xyz'+'<br/>');
document.write(escapeCharacters('abc"def\'xyz')+'<br/>');
</script>
0
 
rdogmartinAuthor Commented:
Unfortunately, that did not make any difference. I spent some time to reduce the issue down to the simplest scenario:

<p id="pTest"></p>
<script type="text/javascript">
    var roleName = 'role\"name';
    var roleNameEscaped = escapeCharacters(roleName);
    var str = '<a href="javascript:alert(\'' + roleNameEscaped + '\');">Test</a>';
   
    document.getElementById('pTest').innerHTML = str;
   
    function escapeCharacters(str)
    {
        str = str.replace(/"/g, '\\\"').replace(/\'/g, "\\'");
        return str;
    }
</script>

The script writes a hyperlink to the <p> tag that, when clicked, shows an alert displaying the contents of the roleName variable. When roleName contains a quotation mark, as shown above, the script fails.

I cannot figure out how to escape the quote inside the roleName variable so that the script works.

0
 
fsze88Commented:
how about this

<p id="pTest"></p>
abc
<script type="text/javascript">
   var roleName = 'role\"name\'abc';
   var roleNameEscaped = escapeCharacters(roleName);
   var str = '<a href="javascript:alert(\'' + roleNameEscaped + '\');">Test</a>';
   document.getElementById('pTest').innerHTML = str;
   function escapeCharacters(str)
   {
       str = str.replace(/\"/g, escape("\"")).replace(/\'/g, escape("\""));
       return str;
   }
</script>

Open in new window

0
 
rdogmartinAuthor Commented:
Thanks for turning me on to the escape function! That got me pointed in the right direction, and I ended up with the following. I replaced escape with encodeURI because escape is deprecated, and I tweaked your sample so that apostrophes remain apostrophes instead of being converted to quotation marks.

In the end it works!

<p id="pTest"></p>
abc
<script type="text/javascript">
   var roleName = 'role\"name\'abc';
   var roleNameEscaped = escapeCharacters(roleName);
   var str = '<a href="javascript:alert(\'' + roleNameEscaped + '\');">Test</a>';
   document.getElementById('pTest').innerHTML = str;
   function escapeCharacters(str)
   {
        return encodeURI(roleName.replace(/"/g, '\\\"').replace(/\'/g, "\\'"));
   }
</script>




0

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now