single quotes breaking down the JavaScript String

Question

When I put Single quote in text box, it does not show in dynamically added textbox. See following example :

$("#abc").before("<div><input type='text' value='" + $scope.txt + "'/></div>");

http://jsfiddle.net/U3pVM/15777/

Of you include a single quote in your string it breaks the string you're inserting with jQuery. — , May 22 '15 at 06:06
Not to be "that guy", but using jQuery for DOM manipulation inside Angular is a really bad idea. See here: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background/15012542#15012542 — Mordred, May 22 '15 at 06:51

score 4 · Answer 1 · edited May 23 '17 at 12:22

I've had a similar problem some time ago, and found this answer https://stackoverflow.com/a/9756789/2619170

See the quoteattr function, that's what you need: http://jsfiddle.net/U3pVM/15780/

function quoteattr(s, preserveCR) {
    preserveCR = preserveCR ? '&#13;' : '\n';
    return ('' + s) /* Forces the conversion to string. */
        .replace(/&/g, '&amp;') /* This MUST be the 1st replacement. */
        .replace(/'/g, '&apos;') /* The 4 other predefined entities, required. */
        .replace(/"/g, '&quot;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        /*
        You may add other replacements here for HTML only 
        (but it's not necessary).
        Or for XML, only if the named entities are defined in its DTD.
        */ 
        .replace(/\r\n/g, preserveCR) /* Must be before the next replacement. */
        .replace(/[\r\n]/g, preserveCR);
        ;
}

score 0 · Answer 2 · answered May 22 '15 at 06:47

Try this, I have assumed that you want "text with quote" as an input to be added and displayed without quotes.

 function TodoCtrl($scope) {
  $scope.txt = "";
    $scope.addBefore = function() {
        $("#abc").before("<div><input type=\"text\" value=" + $scope.txt + "></div>");
    };
}

score 0 · Answer 3 · edited May 22 '15 at 07:01

0

Try replacing _'_ by <code>&ampapos;<code> , or _"_ by <code>&ampquot;<code>

JSFiddle

    function TodoCtrl($scope) {
     $scope.txt = "";
     $scope.addBefore = function() {
        $("#abc").before("<div><input type='text' value='" + $scope.txt.replace("'","&apos;") + "'/></div>");
    };
}

edited May 22 '15 at 07:01

ketan

19,129
42
60
98

answered May 22 '15 at 06:50

Shanavas M

1,581
1
17
24

score 0 · Answer 4 · answered May 22 '15 at 06:51

0

function TodoCtrl($scope) {
  $scope.txt = "";
    $scope.addBefore = function() {
        $("#abc").before('<div><input type="text" value="' + $scope.txt + '"></div>');
    };
}

just change from double to single

http://jsfiddle.net/U3pVM/15784/

answered May 22 '15 at 06:51

Muhaimin

1,643
2
24
48

score 0 · Answer 5 · answered May 25 '15 at 10:26

0

I have done this by replacing the single or double Quote by equivalent HTML code.

answered May 25 '15 at 10:26

Sunil Madan

457
1
4
17

single quotes breaking down the JavaScript String

5 Answers5