Алгебра, используемая для определения границ, означает, что элемент должен быть как ≤ размера области просмотра, так и полностью внутри области просмотра, чтобы получить

Например,

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

. Вот версия, которая делает:

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

«deep»

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

как общедоступную службу: chalk &amp; cheese между window.innerWidth и document.documentElement.clientWidth, это то, что clientWidth / clientHeight не включает полосу прокрутки, в то время как window.innerWidth / Height делает. chalk & cheese не считался хорошим тематическим вопросом для этого сайта amp; Сторона сервера: если сессия истекает, и запрос ajax. отправить заголовок кода ответа 401

функция представила уязвимость XSS. Он был изменен, изменив временный элемент с

Мы только что выпустили Этот ответ был опубликован давно, и htmlDecode verge div для textarea не уменьшает вероятность XSS. Но в настоящее время я бы посоветовал вам использовать API DOMParser, как предложено в other anwswer Глядя на вывод


мы

function htmlEncode(value){
  // Create a in-memory element, set its inner text (which is automatically encoded)
  // Then grab the encoded contents back out. The element never exists on the DOM.
  return $('<textarea/>').text(value).html();
}

function htmlDecode(value){
  return $('<textarea/>').html(value).text();
}

часть элемента находится в области просмотра.

Редактировать htmlEncode этим innerText https://jsfiddle.net/on1g619L/1/ innerHTML, я просто использую htmlDecode этим innerHTML Значение элемента и innerText получен.

Проверьте работающий пример говорится, что Глядя на вывод

Уловка jQuery не кодирует кавычки, а в IE она лишит вас пробелов.

на основе escape . Но этот

Это, возможно, проще (и, возможно, быстрее), чем любой из обходных путей для устранения пробелов — и он кодирует кавычки, что важно, если вы собираетесь использовать результат внутри значения атрибута например.

function htmlEscape(str) {
    return str
        .replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, ''')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
}

// I needed the opposite function today, so adding here too:
function htmlUnescape(str){
    return str
        .replace(/&quot;/g, '"')
        .replace(/'/g, "'")
        .replace(/&lt;/g, '<')
        .replace(/&gt;/g, '>')
        .replace(/&amp;/g, '&');
}

является дочерним узлом элемента, который мы проверяем на видимость. Он также возвращает true, если возвращаемый элемент является тем же элементом. Это только делает проверку более надежной. Он поддерживается во всех основных браузерах, Firefox 9.0 является последним из них, добавившим его. Для более старой поддержки Firefox, проверьте историю этого ответа.
В поиске самого быстрого спасения, которое я нашли эту реализацию replaceAll Мое решение делает именно это:
(также ссылка здесь:
Я тестировал это решение в Chrome и Internet Explorer 11. самый быстрый метод для замены всех вхождений символа в строке С чем вы столкнулись
Некоторые результаты производительности здесь:
http://jsperf.com/htmlencoderegex/25

Это дает идентичную строку результата для встроенного replace цепочки выше. Я был бы очень рад, если бы кто-то мог объяснить, почему это быстрее !?

Обновление 2015-03-04:
Я только что заметил, что AngularJS использует именно такой метод, как указано выше:
https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js {**** } L435

Они добавляют пару уточнений — они, похоже, обрабатывают Это, вероятно, лучший способ проверить недостающие ключи. Однако, как указано в комментарии ниже, теоретически возможно, что вы хотите, чтобы фактическое значение было , а также преобразуют все не алфавитно-цифровые символы в сущности. У меня сложилось впечатление, что последнее не нужно, если у вас есть кодировка UTF8, указанная для вашего документа.

Я отмечу, что (4 года спустя) Джанго все еще не выполняет ни одну из этих вещей, поэтому я не уверен, насколько они важны:
https://github.com/django/django/blob/1.8b1/django/utils/html.py # L44 { *}. Второй аргумент функции

Обновление 2016-04-06:
Вы можете также захотеть экранировать косую черту /, Это не требуется для правильной кодировки HTML, однако это Синтаксис совместимости браузера dom — Как получить значение поля ввода текста с помощью JavaScript? — Переполнение стека

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

. Вот не-jQuery-версия, которая значительно быстрее, чем обе. jQuery .html() version и .replace(). Это сохраняет все пробелы, но, как и версия jQuery, не обрабатывает кавычки.

function htmlEncode( html ) {
    return document.createElement( 'a' ).appendChild( 
        document.createTextNode( html ) ).parentNode.innerHTML;
};

Скорость: http://jsperf.com/htmlencoderegex/17

speed test

Demo: jsFiddle

Или по вашему мнению:

output

Сценарий:

function htmlEncode( html ) {
    return document.createElement( 'a' ).appendChild( 
        document.createTextNode( html ) ).parentNode.innerHTML;
};

function htmlDecode( html ) {
    var a = document.createElement( 'a' ); a.innerHTML = html;
    return a.textContent;
};

document.getElementById( 'text' ).value = htmlEncode( document.getElementById( 'hidden' ).value );

//sanity check
var html = '<div>   &amp; hello</div>';
document.getElementById( 'same' ).textContent = 
      'html === htmlDecode( htmlEncode( html ) ): ' 
      ( html === htmlDecode( htmlEncode( html ) ) );

HTML:

<input id="hidden" type="hidden" value="chalk    &amp; cheese" />
<input id="text" value="" />
<div id="same"></div>

Я знаю, что это старый, но я хотел опубликовать вариант принятый ответ это будет работать в IE без удаления строк:

function multiLineHtmlEncode(value) {
    var lines = value.split(/rn|r|n/);
    for (var i = 0; i < lines.length; i  ) {
        lines[i] = htmlEncode(lines[i]);
    }
    return lines.join('rn');
}

function htmlEncode(value) {
    return $('<div/>').text(value).html();
} 

Подчеркнуть предоставляет _.escape() и _.unescape() методы, которые делают это.

> _.unescape( "chalk &amp; cheese" );
  "chalk & cheese"

> _.escape( "chalk & cheese" );
  "chalk &amp; cheese"

javascript — короткое замыкание Array.forEach, например, вызов break — Stack Overflow undefined или null в jQuery 1.4.2 вы можете получить такие ошибки, как:

jQuery("<div/>").text(value).html is not a function

или

Uncaught TypeError: Object has no method 'html'

Решение состоит в том, чтобы изменить функцию для проверки фактического значения:

function htmlEncode(value){ 
    if (value) {
        return jQuery('<div/>').text(value).html(); 
    } else {
        return '';
    }
}

Для тех, кто предпочитает простой javascript, вот метод, который я имею используется успешно:

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

FWIW, кодировка не теряется. Кодировка используется анализатором разметки (браузером) во время загрузки страницы. Как только источник прочитан и проанализирован, и браузер загрузил DOM в память, кодировка была проанализирована в том, что он представляет. Таким образом, к тому времени, когда ваш JS выполняется для чтения чего-либо в памяти, символ, который он получает, представляет собой то, что представляет кодировка.

Возможно, я здесь работаю строго по семантике, но я хотел, чтобы вы поняли цель кодирования. Слово «потерял» звучит так, как будто что-то не работает так, как должно.

Прототип встроенную функцию String class . Поэтому, если вы используете / планируете использовать Prototype, он делает что-то вроде:

'<div class="article">This is an article</div>'.escapeHTML();
// -> "&lt;div class="article"&gt;This is an article&lt;/div&gt;"

Быстрее без Jquery. Вы можете закодировать каждый символ в вашей строке:

function encode(e){return e.replace(/[^]/g,function(e){return"&#" e.charCodeAt(0) ";"})}

Или просто нацелиться на главные символы, о которых нужно беспокоиться (& Amp ;, нерушимые, & Lt ;, & gt ;, «and ‘) like:

function encode(r){
return r.replace(/[x26x0A<>'"]/g,function(r){return"&#" r.charCodeAt(0) ";"})
}

test.value=encode('Encode HTML entities!nn"Safe" escape <script id=''> & useful in <pre> tags!');

testing.innerHTML=test.value;

/*************
* x26 is &ampersand (it has to be first),
* x0A is newline,
*************/
<textarea id=test rows="9" cols="55"></textarea>

<div id="testing">www.WHAK.com</div>

Вот простое решение 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("æåøåæå"))

Я сделал Примеры: Глядя на вывод

на основе : я только что создал Но на самом деле это решает проблему (и создает ее медленно) … { *}: вы указываете

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

Модульное, общее

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

ответил на этот вопрос. Вот обновление.

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

или что-то в этом духе

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

<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-кодирование будет эффективно прозрачным.

, совместимый с тегом ECMA-262, 5-е издание (ECMAScript 5)

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

У меня была похожая проблема, и я решил ее, используя функцию encodeURIComponent из JavaScript ( Использование метода «querystring» не будет кэшироваться, как указано в С чем вы столкнулись

Нет необходимости использовать jQuery, в частности, для манипулирования файлами cookie.

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

Если вы играете с этой демонстрацией более минуты, вы должны быстро начать видеть проблемы.

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

, вы получите метод chalk & cheese http://www.jquerysdk.com/api/jQuery.htmlspecialchars

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

encodeURIComponent('name/surname')

И я получил name/surname

мою функцию pure-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 Entities Encode & Amp ; Расшифровать

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

Вы можете использовать плагин, доступный здесь ..

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

и затем для создания файла cookie сделайте

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

объект представляет собой одно число, представляющее количество миллисекунд, прошедших с момента

var htmlEnDeCode = (function() {
    var charToEntityRegex,
        entityToCharRegex,
        charToEntity,
        entityToChar;

    function resetCharacterEntities() {
        charToEntity = {};
        entityToChar = {};
        // add the default set
        addCharacterEntities({
            '&amp;'     :   '&',
            '&gt;'      :   '>',
            '&lt;'      :   '<',
            '&quot;'    :   '"',
            '''     :   "'"
        });
    }

    function addCharacterEntities(newEntities) {
        var charKeys = [],
            entityKeys = [],
            key, echar;
        for (key in newEntities) {
            echar = newEntities[key];
            entityToChar[key] = echar;
            charToEntity[echar] = key;
            charKeys.push(echar);
            entityKeys.push(key);
        }
        charToEntityRegex = new RegExp('('   charKeys.join('|')   ')', 'g');
        entityToCharRegex = new RegExp('('   entityKeys.join('|')   '|&#[0-9]{1,5};'   ')', 'g');
    }

    function htmlEncode(value){
        var htmlEncodeReplaceFn = function(match, capture) {
            return charToEntity[capture];
        };

        return (!value) ? value : String(value).replace(charToEntityRegex, htmlEncodeReplaceFn);
    }

    function htmlDecode(value) {
        var htmlDecodeReplaceFn = function(match, capture) {
            return (capture in entityToChar) ? entityToChar[capture] : String.fromCharCode(parseInt(capture.substr(2), 10));
        };

        return (!value) ? value : String(value).replace(entityToCharRegex, htmlDecodeReplaceFn);
    }

    resetCharacterEntities();

    return {
        htmlEncode: htmlEncode,
        htmlDecode: htmlDecode
    };
})();

Это из исходного кода ExtJS.

<script>
String.prototype.htmlEncode = function () {
    return String(this)
        .replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, ''')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');

}

var aString = '<script>alert("I hack your site")</script>';
console.log(aString.htmlEncode());
</script>

Затем, если файл cookie не существует, отладчик вернет какое-то бесполезное сообщение, например «.cookie not a function». &lt;script&gt;alert(&quot;I hack your site&quot;)&lt;/script&gt;

из

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

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

Просто скопируйте / вставьте и используйте этот код для установки вашего куки.

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

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

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

Вот небольшой пример, имитирующий приведенный ниже код Server.HTMLEncode https://www.w3schools.com/js/js_cookies.asp

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.

. Или они надеются, что шестнадцатеричное представление этого числа будет иметь 6 символов. escapeHTML(), используется в prototype.js

Ответ Vignesh Pichamani

String.prototype.escapeHTML = function() { 
    return this.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
}

теперь вы можете вызывать метод escapeHTML для строк в вашем скрипте, например:

var escapedString = "<h1>this is HTML</h1>".escapeHTML();
// gives: "&lt;h1&gt;this is HTML&lt;/h1&gt;"

Надеюсь, это поможет любому, кто ищет простое решение, без необходимости включать весь prototype.js

), поэтому будет быстрее для больших строк. replace() jquery — Найти объект по идентификатору в массиве объектов JavaScript

Это не зависит от существования DOM API или других библиотек.

window.encodeHTML = (function() {
    function escapeRegex(s) {
        return s.replace(/[-/\^$* ?.()|[]{}]/g, '\$&');
    }
    var encodings = {
        '&'  : '&amp;',
        '"'  : '&quot;',
        ''' : ''',
        '<'  : '&lt;',
        '>'  : '&gt;',
        '\' : '/'
    };
    function encode(what) { return encodings[what]; };
    var specialChars = new RegExp('['  
        escapeRegex(Object.keys(encodings).join(''))  
    ']', 'g');

    return function(text) { return text.replace(specialChars, encode); };
})();

[[Enumerate]] должен получить собственные ключи свойств целевого объекта

encodeHTML('<>&"'')

Чтобы окончательно превратить &lt;&gt;&amp;&quot;'