CODEWITHSUNDEEP
javascript
Happydevdays
Happydevdays

Reputation: 2072

how to embed value with an apostrophe in querystring

I have the following javascript: 

tr.append("<a href='add_widget.html?id=" + data[i].id + "&pg=" + data[i].page_number + "&dest=" + data[i].dest + "&name=" + data[i].name.replace("'","\\'") + "'</a><button class='btn btn-xs btn-primary'>Edit</button>&nbsp;</td>");

The code in question has to do with the name field. If I have a name like "John Doe" when I click on the hyperlink created by the above javascript, the new page's querystring has the full name. However, if I try to pass a name like "John's stuff", the above logic creates a query string variable that looks like this:

&name=John\

How can I change the above code so that the entire string "John's stuff" is passed to the add_widget.html page?

Thanks.

Upvotes: 1

Views: 3175

Answers (5)

Ben
Ben

Reputation: 1

I know this is an old post, but seems to me like the deeper issue is that programming languages accept/use the apostrophe character (ie %27) as a single quote.
It seems like this is a fundamental semantics issue. The apostrophe and the single quote are semantically two different things, but the same character is being used for both purposes. I encountered this issue passing surnames through query string that contain apostrophes - eg "O'Reily". The apostrophe in the surname is treated as an open single quote and it breaks the query string because it gets replaced with a double quote in HTML and then doesn't have a matching terminating double quote.
My view is that the apostrophe character should not equate to a single quote. But that is a very large issue and I guess it would be too late to change that now.

So, back to fixing this issue in a realistic way, it seems to me that the escape() method does the best job.
As others have said, encodeURIComponent() does not encode apostrophes. With that in mind, what is the benefit of using encodeURIComponent() over escape()?
Would it be better to do both? encodeURIComponent(escape())?

Upvotes: 0

legui
legui

Reputation: 192

Using escape(data[i].name) instead of data[i].name.replace("'","\\'"), will solve your problem.

Upvotes: 0

Paul S.
Paul S.

Reputation: 66334

You need to think, what will be interpreting my code, so what do I need to escape for?

  1. Your code will be interpreted by the HTML Interpreter in the browser
  2. Your code will be interpreted as a URI

This means you need to escape/encode them in reverse order. Luckily JavaScript provides a URI encoder as encodeURIComponent, but it doesn't provide a HTML one (probably as we have DOM Methods) but it isn't too hard to implement for important characters, e.g.

function html_encode(str) {
    var re_chars = /[<>'"]/g;
    function replacer($0) {
        return '&#' + $0.charCodeAt(0) + ';'
    }
    return str.replace(re_chars, replacer);
}
// example follows
html_encode('<foo bar="baz">'); // "&#60;foo bar=&#34;baz&#34;&#62;"

So for you,

attrib_value = html_encode(/* ... + */ encodeURIComponent(data[i].name) /* + ... */ );

For completeness,

function html_decode(str) {
    var re = /&(?:#\d{1,3}|amp|quot|lt|gt|nbsp);/g, // notice extra entities
        d = document.createElement('div');
    function replacer($0) {
        d.innerHTML = $0;
        return d.textContent;
    }
    return str.replace(re, replacer);
}
// and an example
html_decode('&#60;foo bar=&#34;baz&#34;&#62;'); // "<foo bar="baz">"

Upvotes: 1

Pointy
Pointy

Reputation: 413709

When you're trying to "protect" characters, you have to keep in mind what you're protecting them from. In this case, there are two interpreters you have to worry about:

  • You're building HTML, so you have to worry about the HTML parser;
  • You're building a URL, so you have to worry about how the browser and the server will parse the URL.

To deal with the first problem, you can replace the quotes with the HTML entity equivalent (&#39;). To deal with the second, you can use encodeURIComponent().

I think you'd want to do the encodeURIComponent() call first, to avoid having the HTML entity notation get messed up. The entity notation will be gone after the HTML parser is finished with the string anyway:

function qEncode(str) {
  return encodeURIComponent(str).replace(/'/g, "&#39;");
}

To use that:

tr.append("<a href='add_widget.html?id=" + 
  qEncode(data[i].id) + "&pg=" + 
  qEncode(data[i].page_number) + "&dest=" + 
  qEncode(data[i].dest) + "&name=" + 
  qEncode(data[i].name) + 
  "'</a><button class='btn btn-xs btn-primary'>Edit</button>&nbsp;</td>"
);

Note that you could also encode double-quote characters too.

A totally different way of working around this problem would be to build the DOM content with DOM APIs. By doing that, you'd completely avoid the HTML parser, and you'd just need encodeURIComponent().

Upvotes: 1

formixian
formixian

Reputation: 1559

replace("'","%27")

try http://meyerweb.com/eric/tools/dencoder/ it's an online URL encoder/decoder.

Upvotes: 1

Related Questions