Как использовать javascript для получения специальных символов html при вводе текста

Я хочу отправить какой-то специальный символ html в текстовое поле, а затем использовать javascript, чтобы вернуть его в исходный формат: например, если я отправил «& pi», он покажет «π» при вводе текста, и когда я использую javascript для вернуть его, я должен получить "&pi", но я могу получить только "π", а не "&pi". Пожалуйста, помогите, мой код выглядит следующим образом:

<script type="text/javascript"> 
function qpush(a) {
    document.getElementById('input').value += a;
}

function show(a) {
    alert(document.getElementById('input').value);
}
</script>

<input type="text" id="input" />
<input type="button" onclick="qpush('&pi;');" value="&pi;" />
<input type="button" onclick="show()" value="go" />

javascript html special-characters escaping htmlspecialchars
person kli    schedule 17.07.2012    source источник

Ответы (3)


arrow_upward
3
arrow_downward

В зависимости от того, для чего вам это нужно, вы можете сделать один из 3 вариантов:

  1. используйте функции escape и unescape javascript:

    var escaped = escape('π') // escaped = "%u03C0", который unescape превратится обратно в π

  2. Если у вас есть доступный jQuery, метод html может помочь:

    $('ввод').val().html()

  3. Это хак, но он будет работать: сохраните копию значения так, как вы хотите, чтобы оно возвращалось в атрибуте 'data-' элемента ввода, это будет проверено в html5 и не сломается в других типах документов.

    document.getElementById('input').setAttribute('data-originalValue', '&pi')

person Lior    schedule 17.07.2012
comment
Спасибо за помощь, я использую экранированную форму для данных и неэкранированную форму для отображения, все работает нормально. - person kli; 18.07.2012
comment
Круто, рад быть полезным :) - person Lior; 26.08.2012

arrow_upward
1
arrow_downward

Свойство value даст вам текст, а не HTML.

Можно попробовать getAttribute('value'), но, поскольку &pi; и π в HTML идентичны, браузер может вернуть π и в этом случае.

После преобразования HTML в DOM невозможно получить доступ к исходному HTML (кроме повторной загрузки HTML с помощью XHR и самостоятельного анализа необработанного текста).

Если вы хотите, чтобы данные были "&pi;", тогда HTML для них должен быть &amp;pi;.

Если вы хотите, чтобы это и рендеринг на кнопке были π, вам нужно:

<button type="button" value="&amp;pi;">π</button>

(Помня о различных ошибках старого IE с элементом кнопки)

Это, конечно, отобразит &pi;, когда вы скопируете значение в текстовый ввод.

person Quentin    schedule 17.07.2012
comment
Спасибо за вашу помощь, но document.getElementById('input').getAttribute('value') возвращает null. - person kli; 17.07.2012
comment
О, пропустил, что это был другой элемент, из которого вы получали значение. getAttribute возвращает значение атрибута (которое является значением ввода по умолчанию), а не текущее значение. - person Quentin; 17.07.2012

arrow_upward
-1
arrow_downward

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

document.getElementById('input').value.replace(/π/g,"&pi;");
person Christoph    schedule 17.07.2012
comment
хороший обходной путь, но мне нужно сделать это для всех специальных символов, а не только для π. - person kli; 17.07.2012
comment
@KelvinLi Вы можете поддерживать массив специальных сопоставлений сущностей, выполняющих замену. - person Christoph; 17.07.2012
comment
Я пытался, но похоже, что replace() нельзя использовать для очень специальных символов, таких как π. - person kli; 17.07.2012