Буквенная кавычка во HTML входное значение - PullRequest
Новая
       65

Буквенная кавычка во HTML входное значение

0 голосов
/ 08 апреля 2020

Я динамически преобразовываю список параметров в серию переключателей. Одно из значений в параметре имеет буквенную кавычку. 

<option value="6\" tall">

Когда я пропускаю oop через каждую опцию, потяните значение $(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"="">

Я не могу избежать значения, потому что тогда значение на самом деле не совпадает с тем, что возвращается исходным списком выбора.

Есть идеи, как создать этот переключатель?

Ответы [ 4 ]

1 голос
/ 08 апреля 2020

В HTML \" означает не буквальную кавычку, а просто backsla sh, за которой следует двойная кавычка. В HTML для создания символа кавычки, когда вам нужно, вы используете HTML Entities , а спецификация c для двойной кавычки: &quot;. 

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

\" - это escape-код для двойной кавычки, когда эта строка анализируется во время выполнения 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'>
0 голосов
/ 10 апреля 2020

Спасибо за предложения каждого. Я нашел проблему. На самом деле мне пришлось сначала собрать значения из опций, затем создать переключатели с пустым атрибутом значения и добавить их на страницу. Затем l oop обратно и только $ (fieldid) .val (значение), чтобы установить значения.

Другая проблема с сохранением значения, затем переводом нашей страницы обратно в режим редактирования и значение не является повторно выбран. Конечная проблема - это ошибка в ядре программного обеспечения, из-за которой неправильно сравнивается сохраненное значение со значением в списке.

0 голосов
/ 08 апреля 2020

Дополнительная информация: я попытался создать переключатели с пустым атрибутом «value»: 

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

Тег опции на самом деле выглядит так: 

<option value="6\" tall">

Как я oop через мои параметры я помещаю значения в массив. Затем, после того как я добавлю HTML для переключателей на страницу, я проведу oop через массив и добавлю значение к атрибуту переключателя. 

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

Знак = был экранирован с помощью "" "Хотя это ближе, к сожалению, это не то же самое. Исходное значение в теге параметра не соответствует значению конечного результата переключатель.

0 голосов
/ 08 апреля 2020

Цитаты в HTML

Есть два простых способа избежать конфликтующих цитат:

  1. Вместо использования двойных кавычек в HTML, используйте одинарные кавычки. 

    <option value='6" tall'>6" tall</option>

  2. <option> по умолчанию будет содержать текстовое содержимое, если value не назначено. 

    <option>7" tall</option>

Strings

  • Использование сложных литеральных строк с конкатенированными переменными немного более удобно, если вы чередуете двойные и одинарные кавычки: 

    // Literal string concatenation syntax: '+VAR+'
let literalString = '<input id="'+ID+'" type="radio">';

  • Литералы шаблона интерполировать переменные и выражения: 

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

Я предпочитаю использовать литералы шаблона для более длинных сложных строк и литеральные строки для коротких простых строк.

Demo

Следующая демонстрация собирает все значения в массив, затем создает простой переключатель , затем добавляет атрибуты и значения к нему, используя простое присвоение свойств JavaScript и массив значений. Использование htmlStrings очень подвержено ошибкам, рассмотрите альтернативу, представленную в демоверсии.

Примечание: детали прокомментированы в демоверсии 

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