Can not fetch html value attribute containing double quote

Question

My html attribute is like below:

<span>
  <input 
    class="editWidgetName" 
    type="text" 
    maxlength="100" 
    value="Untitled "NAME" 30\10\2017" 
    style="display:none;padding-right:1px;"
    />
</span>

I can't fetch the value of the above 'editWidgetName' class. It's always fetching 'Untitled ' only. The string after '"' portion is getting omitted. I tried javascript to escape the '"' like: value.replace(/\"/g, '\\"') , but the result is same.

Again, I tried with encoding the value attribute using js function like:

function encodeHTML(s) {
    return s.split('&').join('&')
            .split('<').join('&lt;')
            .split('"').join('&quot;')
            .split("'").join('&#39;');
}

but result is fetching as 'Undefined'.

Please suggest another way to resolve this. Thanks.

Answer 1

Solve a problem means nothing. Take good habits is the solution.

@ProsenjitDutta, make your best to separate the logic, the style and the container. As a start, you could:

• Never use the style attribute. Use CSS instead, with CLASSes and IDs attributes.
• Never write the value in the HTML code. Use Javascript instead (or templates).
• Take a time to find the best method (SO is your friend). To repeat split/join is a bad practice (slow and ugly), use Regexp instead.

// Maybe typo here (fixed)----v   (backslash)

let name = 'Untitled "NAME" 30/10/2017'; 

// With jQuery:

$('#editWidget').val(name) ;

// Without jQuery

document.querySelector('#editWidget').value = name ;

/**
  * Don't hard code the style in the tag
  * Use CSS instead (as below)
  *
  */
input.editWidgetName {
  width: 200px;
  padding-right: 1px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>
<!--          v---------- an ID here                 -->
  <input id="editWidget" value="" class="editWidgetName" type="text" maxlength="100" />
<!--    empty value --------^                        -->

</span>

function encodeHTML(s) {
  return s.replace(/([&<"'])/g, function(match, char){
  switch(char){
    case '&': return '&amp;';
    case '<': return '&lt;';
    case '"': return '&quot;';
    case "'": return '&#39;';
  }
})}

let s = "var=val<pour\"voir'ca'" ;

console.log('s = ', encodeHTML(s));

.as-console-wrapper{max-height:100%!important;top:0;}