CODEWITHSUNDEEP
javascriptstring
Pedro Henrique Bufulin
Pedro Henrique Bufulin

Reputation: 769

problems with character (') inside string

The problem I'm having is when a name with " ' " character is added, I get an error. The error is 

addLocation({ lat:-11.8445642, lng:-41.221212, name: 'EXAMPLE'S' })

The problem is clear to see: in the name property, the string 'EXAMPLE'S' has a " ' " in the middle of the string, which cuts off the end of the string, and it doesn't send this object. Some of the names that go in this function might have this character. How do I get it to work, including this character?

I tried the replace method, as it is shown in the function code providen, but it still doesn't work. Maybe I don't know how to use it, or it doesn't work in this case.

    function contentBuilder({ name, geometry }) {
        const { location } = geometry

        name.replace(/'/g,"\'");

        return `
            ${name}</br>
            ${location.lat()}</br>
            ${location.lng()}</br>
            <a onclick="addLocation({ lat:${location.lat()}, lng:${location.lng()}, name: '${name}' })" class="map-add-link">Adcionar +</a>
       `
    }
  function addLocation(location) {
        revealLocationSelector('newPlaceMap');

         if(!containLocation(locations,location)){
            locations.push(location);
        }

When the function is send, it should give me that error. specified. I should be able to send the object to de addLocation function

Upvotes: 2

Views: 715

Answers (2)

Ruan Mendes
Ruan Mendes

Reputation: 92334

You should never build a JS string yourself. The easiest naive fix is to do name.replace(/'/g,"\\'") so that you are escaping the single quote with a backslash. Note that the backslash itself has to be escaped as \\.

` ... name: '${name.replace(/'/g,"\\'")}' ...`

However, that will break if you string contains double quotes or anything else that needs to be escaped such as \n\b and you also need to be aware of the type of quote that is enclosing the HTML attribute and you potentially should escape it for HTML to since an extra closing > may break your HTML.

The best thing would be to HTML encode an entire JSON string so that it would work in any context and not allow HTML injection which could be susceptible to XSS attacks.

const loc = {
  lat: -11.8445642,
  lng: -41.221212,
  name: "escaped string with <b> that should not show up bold and JS characters \n \r \\ \" '"
};

function htmlEncode(str) {
    return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

function htmlJsonEncode(obj){
    return htmlEncode(JSON.stringify(obj));
}

document.querySelector("div.output").innerHTML += `
<!-- You should always escape content you have no control of when displaying it as HTML -->
name: ${htmlEncode(loc.name)}<br />
 lat: loc.lat<br />
 long: loc.lng<br />
 <hr />
 <a onclick="console.log(${htmlJsonEncode(loc)})"); return false"
    href="#">Log Object to console using double quotes for HTML attributes</a>
 <hr />
 <a onclick='console.log(${htmlJsonEncode(loc)}); return false'
    href="#">Log Object to console using single quotes for HTML attributes</a>
  `;
<div class="output"></div>

Upvotes: 3

Pedro Henrique Bufulin
Pedro Henrique Bufulin

Reputation: 769

OK, in this case, what worked for me is:

 function contentBuilder({ name, geometry }) {
        const { location } = geometry;
        let nameShow = name;
        name = name.replace(/'/g,"\\'");
        console.log(name);

        return `
            ${nameShow}</br>
            ${location.lat()}</br>
            ${location.lng()}</br>
            <a onclick="addLocation({ lat:${location.lat()}, lng:${location.lng()}, name: '${name}' })" class="map-add-link">Adcionar +</a>
        `
    }

I just added another / in the replace function. I don't know why, but it worked like a charm.

Upvotes: 0

Related Questions