HTML 输入值中的文字引号

Question

我正在动态地将选项列表转换为一系列单选按钮。选项中的值之一带有文字引号。

<option value="6\" tall">

当我遍历每个选项时，拉取一个值 $(this).val(); 然后我为单选按钮构建一个字符串：

rb="input id=\"CTRL"+fld+"_"+cnt+"\" name=\""+fld+"\" type=\"radio\" "+ sel+" value=\"" +val+ "\"" +valCaption";

如果我对此进行调试和中断，字符串会正确创建，但是当我插入元素时，值中的文字会丢失，结果是：

<input id="CTRLText1_3" name="Text1" type="radio" value="Rev 6" tall"="">

我无法转义该值，因为该值实际上与原始 select 列表返回的值不匹配。

知道如何创建这个单选按钮吗？

Answer 1

在 HTML \" 中并不表示字面引号，它只是表示反斜杠后跟双引号。在 HTML 中，在需要时生成引号字符，使用 HTML Entities 并且双引号的具体实体是：".

<input value="&quot;To be or not to be&quot;">

\" 是双引号的转义码，当该字符串由 JavaScript 运行时而不是 HTML 解析器解析时。

因此，value="6\" 不包含文字引号。它包含 6\。 \ 之后的引号是 value 属性的结束引号，它导致 tall" 保持为无效 HTML，HTML 解析器只是忽略了它。当你拉取输入的值时，你只会得到 6\.

您说字符串创建正确，但事实并非如此。仔细看看你说的你得到了什么;

<input id="CTRLText1_3" name="Text1" type="radio" value="Rev 6" tall"="">

tall"="" 无效 HTML.

要完成我认为您想要的，您应该为 HTML 属性使用单引号，然后可以正确存储双引号供 JavaScript 稍后提取。你不需要任何转义：

console.log(document.querySelector("option").value);

<option value='6" tall'>

Answer 2

HTML

中的引用

有两种简单的方法可以避免引用冲突：

不要在 HTML 中使用双引号，而是使用单引号。
```
<option value='6" tall'>6" tall</option>
```
<option>，将默认为其文本内容。
```
<option>7" tall</option>
```

字符串

如果您在双引号和单引号之间交替使用，则使用带有串联变量的复杂文字字符串会更易于管理：
```
// Literal string concatenation syntax: '+VAR+'
let literalString = '<input id="'+ID+'" type="radio">';
```

模板文字内插变量和表达式：

// Template literal interpolation syntax: ${VAR}
let templateLiteral = `<input id="${ID}" type="radio">`;

我更喜欢对较长的复杂字符串使用模板文字，对较短的简单字符串使用文字字符串。

演示

下面的演示将所有值收集到一个数组中，然后创建一个简单的单选按钮然后使用简单的 JavaScript 属性添加属性和值到它赋值和值数组。使用 htmlStrings 非常容易出错，请考虑演示中提供的替代方案。

注：详情在demo中评论

// Define counter
let i = 0;

// Delegate click event to button.add
$('.add').on('click', function(e) {
  // Increment counter
  i++;
  /*
  .map() will collect all .data and return their values
  .get() will place all of the values into an array
  V is an array of values
  */
  let V = $('.data').map(function() {
    return $(this).val();
  }).get();

  // Checking V array
  console.log(JSON.stringify(V));

  // Append a radio button to fieldset.box
  $('.box').append(`<input type='radio'>`);

  /*
  - Reference the last radio button
  - Dereference the last radio button from a jQuery Object 
    to a JavaScript DOM Node by suffixing [0] to it. 
  - The reason for dereferencing is to be able to use 
    simple plain JavaScript properties
  */
  const rad = $('.box :radio:last')[0];

  /*
  Values are referenced by index from the V array
  The attributes are set by property assignments
  */
  rad.id = 'CTRL' + V[0] + '_' + i;
  rad.name = V[0];
  rad.value = V[1] + ' ' + V[2];

  // Checking the radio button HTML
  console.log(rad.outerHTML);
});

/*
This function just demonstrates what each radio button's
value is when rendered as HTML
*/
$('#formA').on('change', function(e) {
  if ($(e.target).is(':checked')) {
    $('#view').html($(e.target).val());
  }
});

:root,
body {
  font: 400 3vw/1.45 Consolas
}

select,
input,
button {
  display: inline-block;
  font: inherit;
  height: 3ex;
  line-height: 1;
  width: 10ch;
  margin-bottom: 8px;
  padding: 0 2px;
  vertical-align: middle
}

select {
  padding: 2px 2px 4px 2px;
  width: 12ch;
}

button {
  padding: 0px 3px 5px;
  line-height: 1.25;
  width: 6ch;
  cursor: pointer
}

#view {
  color: tomato
}

<form id='formA'>
  <input id='fld' class='data' value='Text1'>
  <input id='val' class='data' value='Rev'>

  <select id='valCaption' class='data'>
    <option value='6" tall'>6" tall</option>
    <option>7" tall</option>
  </select>

  <button class='add' type='button'>ADD</button>

  <fieldset class='box'>
    <output id='view'></output><br>
  </fieldset>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 3

更多信息：我尝试使用空 "value" 属性构建单选按钮：

<input type="radio" value="">

选项标签实际上是这样的：

<option value="6\" tall">

当我遍历我的选项时，我将值放入一个数组中。然后，在将单选按钮的 HTML 添加到页面后，我遍历数组并将值添加到单选按钮的属性中。

for(x=0;x<arrVals.length; x++){
    $("#CTRL"+fld+"_"+x).attr("value",arrVals[x]);
}

最终结果是这样的：

<input id="CTRLText1_1" name="Text1" type="radio" value="Rev 6&quot; tall">

= 符号已用“"”转义虽然这更接近，但不幸的是它并不相同。选项标签中的原始值与单选按钮的最终结果值不匹配。

Answer 4

谢谢大家的建议。我确实找到了问题。实际上，我必须首先从选项中收集值，然后构建具有空白值属性的单选按钮并将其添加到页面中。然后循环返回并仅使用 $(fieldid).val(value) 来设置值。

另一个问题是保存值然后将我们的页面放回编辑模式并且没有重新选择该值。最终的问题是软件核心中的一个错误，它没有正确地将存储的值与列表中的值进行比较。

HTML 输入值中的文字引号

Literal quote mark in HTML input value

javascript

jquery

string-literals

HTML

字符串

演示