Конвертировать специальные символы в HTML в Javascript

Question

Кто-нибудь знает, как преобразовать специальные символы в HTML в Javascript?

Пример:

• & (амперсанд) становится &amp.
• " (двойная кавычка) становится &quot, если ENT_NOQUOTES не установлено.
• ' (одинарная кавычка) становится &#039 только при установленном ENT_QUOTES.
• < (меньше чем) становится &lt.
• > (больше чем) становится &gt.

Answer 1

На мой взгляд, лучший способ - использовать встроенную в браузер функцию экранирования HTML для обработки многих случаев. Для этого просто создайте элемент в дереве DOM и установите innerText элемента в вашей строке. Затем получите innerHTML элемента. Браузер вернет строку в кодировке HTML.

function HtmlEncode(s)
{
  var el = document.createElement("div");
  el.innerText = el.textContent = s;
  s = el.innerHTML;
  return s;
}

Тестовый прогон:

alert(HtmlEncode('&;\'><"'));

Выход:

&;'><"

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

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

Answer 2

Вам нужна функция, которая делает что-то вроде

return mystring.replace(/&/g, "&amp;").replace(/>/g, "&gt;").replace(/</g, "&lt;").replace(/"/g, "&quot;");

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

Answer 3

Эта универсальная функция кодирует каждый не алфавитный символ в свой htmlcode (числовой):

function HTMLEncode(str) {
    var i = str.length,
        aRet = [];

    while (i--) {
        var iC = str[i].charCodeAt();
        if (iC < 65 || iC > 127 || (iC>90 && iC<97)) {
            aRet[i] = '&#'+iC+';';
        } else {
            aRet[i] = str[i];
        }
    }
    return aRet.join('');
}

Answer 4

Из Мозиллы ...

Обратите внимание, что charCodeAt всегда будет возвращать значение, которое меньше 65 536. Это связано с тем, что более высокие кодовые точки представлены парой (менее значимых) «суррогатных» псевдосимволов, которые используются для составления реального символа. Из-за этого, чтобы исследовать или воспроизводить полный символ для отдельных символов со значением 65 536 и выше, для таких символов необходимо извлечь не только charCodeAt (i), но также charCodeAt (i + 1) (как при проверке / воспроизводит строку с двумя> буквами).

Лучшее решение

/**
 * (c) 2012 Steven Levithan <http://slevithan.com/>
 * MIT license
 */
if (!String.prototype.codePointAt) {
    String.prototype.codePointAt = function (pos) {
        pos = isNaN(pos) ? 0 : pos;
        var str = String(this),
            code = str.charCodeAt(pos),
            next = str.charCodeAt(pos + 1);
        // If a surrogate pair
        if (0xD800 <= code && code <= 0xDBFF && 0xDC00 <= next && next <= 0xDFFF) {
            return ((code - 0xD800) * 0x400) + (next - 0xDC00) + 0x10000;
        }
        return code;
    };
}

/**
 * Encodes special html characters
 * @param string
 * @return {*}
 */
function html_encode(string) {
    var ret_val = '';
    for (var i = 0; i < string.length; i++) { 
        if (string.codePointAt(i) > 127) {
            ret_val += '&#' + string.codePointAt(i) + ';';
        } else {
            ret_val += string.charAt(i);
        }
    }
    return ret_val;
}

Пример использования:

html_encode("✈");

Answer 5

Создать функцию, которая использует строку replace

function convert(str)
{
  str = str.replace(/&/g, "&");
  str = str.replace(/>/g, ">");
  str = str.replace(/</g, "&lt;");
  str = str.replace(/"/g, "&quot;");
  str = str.replace(/'/g, "&#039;");
  return str;
}

Answer 6

function char_convert() {

    var chars = ["©","Û","®","ž","Ü","Ÿ","Ý","$","Þ","%","¡","ß","¢","à","£","á","À","¤","â","Á","¥","ã","Â","¦","ä","Ã","§","å","Ä","¨","æ","Å","©","ç","Æ","ª","è","Ç","«","é","È","¬","ê","É","­","ë","Ê","®","ì","Ë","¯","í","Ì","°","î","Í","±","ï","Î","²","ð","Ï","³","ñ","Ð","´","ò","Ñ","µ","ó","Õ","¶","ô","Ö","·","õ","Ø","¸","ö","Ù","¹","÷","Ú","º","ø","Û","»","ù","Ü","@","¼","ú","Ý","½","û","Þ","€","¾","ü","ß","¿","ý","à","‚","À","þ","á","ƒ","Á","ÿ","å","„","Â","æ","…","Ã","ç","†","Ä","è","‡","Å","é","ˆ","Æ","ê","‰","Ç","ë","Š","È","ì","‹","É","í","Œ","Ê","î","Ë","ï","Ž","Ì","ð","Í","ñ","Î","ò","‘","Ï","ó","’","Ð","ô","“","Ñ","õ","”","Ò","ö","•","Ó","ø","–","Ô","ù","—","Õ","ú","˜","Ö","û","™","×","ý","š","Ø","þ","›","Ù","ÿ","œ","Ú"]; 
    var codes = ["©","Û","®","ž","Ü","Ÿ","Ý","$","Þ","%","¡","ß","¢","à","£","á","À","¤","â","Á","¥","ã","Â","¦","ä","Ã","§","å","Ä","¨","æ","Å","©","ç","Æ","ª","è","Ç","«","é","È","¬","ê","É","­","ë","Ê","®","ì","Ë","¯","í","Ì","°","î","Í","±","ï","Î","²","ð","Ï","³","ñ","Ð","´","ò","Ñ","µ","ó","Õ","¶","ô","Ö","·","õ","Ø","¸","ö","Ù","¹","÷","Ú","º","ø","Û","»","ù","Ü","@","¼","ú","Ý","½","û","Þ","€","¾","&#252","ß","¿","ý","à","‚","À","þ","á","ƒ","Á","ÿ","å","„","Â","æ","…","Ã","ç","†","Ä","è","‡","Å","é","ˆ","Æ","ê","‰","Ç","ë","Š","È","ì","‹","É","í","Œ","Ê","î","Ë","ï","Ž","Ì","ð","Í","ñ","Î","ò","‘","Ï","ó","’","Ð","ô","“","Ñ","õ","”","Ò","ö","•","Ó","ø","–","Ô","ù","—","Õ","ú","˜","Ö","û","™","×","ý","š","Ø","þ","›","Ù","ÿ","œ","Ú"];

    for(x=0; x<chars.length; x++){
        for (i=0; i<arguments.length; i++){
            arguments[i].value = arguments[i].value.replace(chars[x], codes[x]);
        }
    }
 }

char_convert(this);

Answer 7

function ConvChar( str ) {
  c = {'<':'&lt;', '>':'&gt;', '&':'&amp;', '"':'&quot;', "'":'&#039;',
       '#':'&#035;' };
  return str.replace( /[<&>'"#]/g, function(s) { return c[s]; } );
}

alert( ConvChar('<-"-&-"->-<-\'-#-\'->') );

Результат:

<-"-&ampamp;-"->-<-'-#-'->

В теге testarea:

<-"-&-"->-<-'-#-'->

Если вы просто измените немного символов в длинном коде ...

Answer 8

В теге PRE - и в большинстве других тегов HTML - обычный текст для пакетного файла, который использует символы перенаправления вывода (<и>), нарушит HTML, но вот мой совет : что-то идет в элементе TEXTAREA - это не сломает HTML, главным образом потому, что мы находимся внутри элемента управления, который создается и обрабатывается ОС, и поэтому его содержимое не анализируется механизмом HTML.

В качестве примера, скажем, я хочу выделить синтаксис моего командного файла, используя javascript. Я просто вставляю код в текстовую область, не беспокоясь о зарезервированных символах HTML, и заставляю сценарий обрабатывать свойство innerHTML текстовой области, которое оценивается как текст с зарезервированными символами HTML, замененными их соответствующими объектами ISO-8859-1. .

Браузеры автоматически экранируют специальные символы при извлечении свойства innerHTML (и outerHTML) элемента. Использование текстовой области (и кто знает, может быть, ввод текста типа) просто избавляет вас от преобразования (вручную или с помощью кода).

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

Answer 9

Как упоминалось dragon, самый чистый способ сделать это с jQuery:

function HtmlEncode(s) {
    return $('<div>').text(s).html();
}

function HtmlDecode(s) {
    return $('<div>').html(s).text();
}

Answer 10

обходной путь:

var temp = $("div").text("<");
var afterEscape = temp.html(); // afterEscape == "&lt;"