Question

我的html属性如下所示：

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

我无法获取上述＆＃39; editWidgetName＆＃39;的值类。它一直在提取“无题”＆＃39;只要。＆＃39;＆＃34;＆＃39;之后的字符串部分被省略了。我试过javascript来逃避＆＃39;＆＃39;＆＃39;＆＃39;喜欢： value.replace(/\"/g, '\\"')，但结果是一样的。

同样，我尝试使用js函数编码value属性，如：

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

但结果是取得＆＃39;未定义＆＃39;。

请提出另一种方法来解决此问题。感谢。

Answer 1

解决问题意味着什么。养成良好的习惯是解决方案。

@ProsenjitDutta，尽量将逻辑，样式和容器分开。首先，您可以：

切勿使用style属性。使用CSS代替CLASSes和ID属性。
永远不要在HTML代码中写入值。使用Javascript代替（或模板）。
花点时间找到最好的方法（SO是你的朋友）。重复拆分/加入是一种不好的做法（缓慢而丑陋），请改用Regexp。

＆＃13;

// 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 ;

＆＃13;

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

＆＃13;

<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>

＆＃13;

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));

＆＃13;

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

＆＃13;

无法获取包含双引号的html值属性

1 个答案: