HTML-кодировка теряется при чтении атрибута из поля ввода

Question

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

Например,

<input id='hiddenId' type='hidden' value='chalk &amp; cheese' />

втягивается в

<input type='text' value='chalk &amp; cheese' />

через некоторый jQuery для получения значения из скрытого поля (именно в этот момент я теряю кодировку):

$('#hiddenId').attr('value')

Проблема в том, что когда я читаю chalk & cheese из скрытого поля, JavaScript, похоже, теряет кодировку. Я не хочу, чтобы значение было chalk & cheese. Я хочу, чтобы литерал amp; был сохранен.

Существует ли библиотека JavaScript или метод jQuery, который будет кодировать строку в HTML-формате?

Answer 1

Вот простое решение javascript. Он расширяет объект String методом «HTMLEncode», который можно использовать для объекта без параметра или с параметром.

String.prototype.HTMLEncode = function(str) {
  var result = "";
  var str = (arguments.length===1) ? str : this;
  for(var i=0; i<str.length; i++) {
     var chrcode = str.charCodeAt(i);
     result+=(chrcode>128) ? "&#"+chrcode+";" : str.substr(i,1)
   }
   return result;
}
// TEST
console.log("stetaewteaw æø".HTMLEncode());
console.log("stetaewteaw æø".HTMLEncode("æåøåæå"))

Я создал gist "метод HTMLEncode для JavaScript" .

Answer 2

На основе санитарная обработка angular ... (синтаксис модуля es6)

// ref: https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js
const SURROGATE_PAIR_REGEXP = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
const NON_ALPHANUMERIC_REGEXP = /([^\#-~| |!])/g;

const decodeElem = document.createElement('pre');


/**
 * Decodes html encoded text, so that the actual string may
 * be used.
 * @param value
 * @returns {string} decoded text
 */
export function decode(value) {
  if (!value) return '';
  decodeElem.innerHTML = value.replace(/</g, '&lt;');
  return decodeElem.textContent;
}


/**
 * Encodes all potentially dangerous characters, so that the
 * resulting string can be safely inserted into attribute or
 * element text.
 * @param value
 * @returns {string} encoded text
 */
export function encode(value) {
  if (value === null || value === undefined) return '';
  return String(value).
    replace(/&/g, '&amp;').
    replace(SURROGATE_PAIR_REGEXP, value => {
      var hi = value.charCodeAt(0);
      var low = value.charCodeAt(1);
      return '&#' + (((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000) + ';';
    }).
    replace(NON_ALPHANUMERIC_REGEXP, value => {
      return '&#' + value.charCodeAt(0) + ';';
    }).
    replace(/</g, '&lt;').
    replace(/>/g, '&gt;');
}

export default {encode,decode};

Answer 3

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

<form>
 <input id="button" type="button" value="Click me">
 <input type="hidden" id="hiddenId" name="hiddenId" value="I like cheese">
 <input type="text" id="output" name="output">
</form>
<script>
    $(document).ready(function(e) {
        $('#button').click(function(e) {
            $('#output').val($('#hiddenId').val());
        });
    });
</script>

JS не вставляет необработанный HTML или что-либо еще; он просто указывает DOM установить свойство value (или атрибут; не уверен). В любом случае, DOM решает любые проблемы с кодированием для вас. Если вы не делаете что-то странное, например, document.write или eval, HTML-кодирование будет эффективно прозрачным.

Если вы говорите о создании нового текстового поля для хранения результата ... это все еще так же просто. Просто передайте статическую часть HTML в jQuery, а затем установите остальные свойства / атрибуты для объекта, который он возвращает вам.

$box = $('<input type="text" name="whatever">').val($('#hiddenId').val());

Answer 4

На самом деле в javascript нет никаких простых методов кодирования / декодирования HTML.

Однако вы можете использовать JS для создания произвольного элемента, задать его внутренний текст, а затем прочитать его с помощью innerHTML.

скажем, с jQuery это должно работать:

var helper = $('chalk & cheese').hide().appendTo('body');
var htmled = helper.html();
helper.remove();

или что-то в этом роде

Answer 5

Моя функция чистого JS:

/**
 * HTML entities encode
 *
 * @param {string} str Input text
 * @return {string} Filtered text
 */
function htmlencode (str){

  var div = document.createElement('div');
  div.appendChild(document.createTextNode(str));
  return div.innerHTML;
}

JavaScript HTML-сущности Кодируют и декодируют

Answer 6

У меня была похожая проблема, и я решил ее с помощью функции encodeURIComponent из JavaScript ( документация )

Например, в вашем случае, если вы используете:

<input id='hiddenId' type='hidden' value='chalk & cheese' />

и

encodeURIComponent($('#hiddenId').attr('value'))

вы получите chalk%20%26%20cheese. Даже пробелы сохраняются.

В моем случае мне пришлось закодировать одну обратную косую черту, и этот код отлично работает

encodeURIComponent('name/surname')

и я получил name%2Fsurname

Answer 7

Вот немного, что эмулирует функцию Server.HTMLEncode из Microsoft ASP, написанную на чистом JavaScript:

function htmlEncode(s) {
  var ntable = {
    "&": "amp",
    "<": "lt",
    ">": "gt",
    "\"": "quot"
  };
  s = s.replace(/[&<>"]/g, function(ch) {
    return "&" + ntable[ch] + ";";
  })
  s = s.replace(/[^ -\x7e]/g, function(ch) {
    return "&#" + ch.charCodeAt(0).toString() + ";";
  });
  return s;
}

Результат не кодирует апострофы, но кодирует другие специальные HTML и любые символы вне диапазона 0x20-0x7e.

Answer 8

Я столкнулся с некоторыми проблемами с обратной косой чертой в строке «Домен \ Пользователь».

Я добавил это к другим побегам из ответа Анентропика

.replace(/\\/g, '\')

Который я нашел здесь: Как избежать обратной косой черты в JavaScript?

Answer 9

Если вы хотите использовать jQuery. Я нашел это:

http://www.jquerysdk.com/api/jQuery.htmlspecialchars

(часть плагина jquery.string, предлагаемого jQuery SDK)

Проблема с Prototype. Я считаю, что он расширяет базовые объекты в JavaScript и будет несовместим с любым jQuery, который вы, возможно, использовали. Конечно, если вы уже используете Prototype, а не jQuery, это не будет проблемой.

РЕДАКТИРОВАТЬ: Также есть это, который является портом строковых утилит Prototype для jQuery:

http://stilldesigning.com/dotstring/

Answer 10

HtmlEncodes заданное значение

  var htmlEncodeContainer = $('<div />');
  function htmlEncode(value) {
    if (value) {
      return htmlEncodeContainer.text(value).html();
    } else {
      return '';
    }
  }