Преобразование специальных символов в HTML в Javascript

Ответ 1

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

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

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

Ответ 2

Лучшим способом, на мой взгляд, является использование встроенной функции escape-выхода 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 также используется прототипом JS-библиотеки, хотя и отличается от упрощенного образца, который я дал.

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

Ответ 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('');
}

Ответ 4

Из Mozilla...

Обратите внимание, что charCodeAt всегда возвращает значение, которое меньше 65 536. Это связано с тем, что более высокие кодовые точки представлены парой (более низкооцененных) "суррогатных" псевдосимволов, которые используются для обозначения реального символа. Из-за этого для того, чтобы исследовать или воспроизводить полный символ для отдельных символов с величиной 65536 и выше, для таких символов необходимо получить не только 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("✈");

Ответ 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;
}

Ответ 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);

Ответ 7

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

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

Результат:

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

В теге testarea:

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

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

Ответ 8

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

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

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

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

Ответ 9

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

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

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

Ответ 10

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

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

Ответ 11

var swapCodes   = new Array(8211, 8212, 8216, 8217, 8220, 8221, 8226, 8230, 8482, 169, 61558, 8226, 61607);
var swapStrings = new Array("--", "--", "'",  "'",  '"',  '"',  "*",  "...", "™", "©", "•", "•", "•");

var TextCheck = {
    doCWBind:function(div){
        $(div).bind({
            bind:function(){
                TextCheck.cleanWord(div);
            },
            focus:function(){
                TextCheck.cleanWord(div);
            },
            paste:function(){
                TextCheck.cleanWord(div);
            }
        }); 
    },
    cleanWord:function(div){
        var output = $(div).val();
        for (i = 0; i < swapCodes.length; i++) {
            var swapper = new RegExp("\\u" + swapCodes[i].toString(16), "g");
            output = output.replace(swapper, swapStrings[i]);
        }
        $(div).val(output);
    }
}

Другой, который мы используем сейчас, работает. Один выше, я вызываю его вместо script и возвращает преобразованный код. Только хорошее на небольших текстовых ресурсах (что означает не полный текст статьи/блога...)

Для выше. Работает на большинстве символов.

var swapCodes   = new Array(8211, 8212, 8216, 8217, 8220, 8221, 8226, 8230, 8482, 61558, 8226, 61607,161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 250, 251, 252, 253, 254, 255, 338, 339, 352, 353, 376, 402);
var swapStrings = new Array("--", "--", "'",  "'",  '"',  '"',  "*",  "...", "™", "•", "•", "•", "¡", "¢", "£", "¤", "¥", "¦", "§", "¨", "©", "ª", "«", "¬", "­", "®", "¯", "°", "±", "²", "³", "´", "µ", "¶", "·", "¸", "¹", "º", "»", "¼", "½", "¾", "¿", "À", "Á", "Â", "Ã", "Ä", "Å", "Æ", "Ç", "È", "É", "Ê", "Ë", "Ì", "Í", "Î", "Ï", "Ð", "Ñ", "Ò", "Ó", "Ô", "Õ", "Ö", "×", "Ø", "Ù", "Ú", "Û", "Ü", "Ý", "Þ", "ß", "à", "á", "â", "ã", "ä", "å", "æ", "ç", "è", "é", "ê", "ë", "ì", "í", "î", "ï", "ð", "ñ", "ò", "ó", "ô", "õ", "ö", "÷", "ø", "ù", "ú", "û", "ü", "ý", "þ", "ÿ", "Œ", "œ", "Š", "š", "Ÿ", "ƒ");

Я создаю файл javascript, который обладает большой функциональностью, в том числе и выше. http://www.neotropicsolutions.com/JSChars.zip

Все необходимые файлы включены. Я добавил jQuery 1.4.4. Просто потому, что я видел проблемы в других версиях, но попробовать их.

Requires: jQuery & jQuery Impromptu from: http://trentrichardson.com/Impromptu/index.php

1. Word Count
2. Character Conversion
3. Checks to ensure this is not passed: "notsomeverylongstringmissingspaces"
4. Checks to make sure ALL IS NOT ALL UPPERCASE.
5. Strip HTML

    // Word Counter
    $.getScript('js/characters.js',function(){
            $('#adtxt').bind("keyup click blur focus change paste",
                function(event){
                    TextCheck.wordCount(30, "#adtxt", "#adtxt_count", event);
            });
            $('#adtxt').blur(
                function(event){
                    TextCheck.check_length('#adtxt'); // unsures properly spaces-not one long word
                    TextCheck.doCWBind('#adtxt');// char conversion
            });

            TextCheck.wordCount(30, "#adtxt", "#adtxt_count", false);
        });

    //HTML
    <textarea name="adtxt" id="adtxt" rows="10" cols="70" class="wordCount"></textarea>
<div id="adtxt_count" class="clear"></div>

    // Just Character Conversions:
    TextCheck.doCWBind('#myfield');

    // Run through form fields in a form for case checking.
    // Alerts user when field is blur'd.
    var labels = new Array("Brief Description","Website URL","Contact Name","Website","Email","Linkback URL");
    var checking = new Array("descr","title","fname","website","email","linkback");
    TextCheck.check_it(checking,labels);

    // Extra security to check again, make sure form is not submitted
    var pass = TextCheck.validate(checking,labels);
    if(pass){
        //do form actions
    }


    //Strip HTML
    <textarea name="adtxt" id="adtxt" rows="10" cols="70" onblur="TextCheck.stripHTML(this);"></textarea>

Ответ 12

 <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>html</title>  
      <script>
      $(function() {   
      document.getElementById('test').innerHTML = "&amp;";
      });

      </script>
    </head>
    <body>
    <div id="test"></div>
    </body>
    </html>

вы можете просто преобразовать специальные символы в html, используя вышеприведенный код.

Ответ 13

Если вам нужна поддержка всех стандартизованных имен символов, unicode и неоднозначные амперсанды, библиотека he - это единственное надежное решение на 100%, о котором я знаю!

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

he.encode('foo © bar ≠ baz 𝌆 qux'); 
// Output : 'foo © bar ≠ baz 𝌆 qux'

he.decode('foo © bar ≠ baz 𝌆 qux');
// Output : 'foo © bar ≠ baz 𝌆 qux'

Ответ 14

Здесь хорошая библиотека, которую я нашел очень полезной в этом контексте.

https://github.com/mathiasbynens/he

По словам автора:

Он поддерживает все стандартизированные именованные символьные ссылки в соответствии с HTML, обрабатывает неоднозначные амперсанды и другие граничные случаи, как браузер будет иметь обширный набор тестов и, вопреки многим другим JavaScript-решения - он отлично справляется с астральными символами Unicode

Ответ 15

Вот несколько методов, которые я использую без необходимости JQuery:

Вы можете закодировать каждый символ в своей строке:

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

Или просто нацелитесь на основные безопасные символы кодирования, чтобы беспокоиться о (&, inebreaks, <, > , "and '), например:

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

test.value=encode('How to encode\nonly html tags &<>\'" nice & fast!');

/*************
* \x26 is &ampersand (it has to be first),
* \x0A is newline,
*************/

<textarea id=test rows="9" cols="55">www.WHAK.com</textarea>

Ответ 16

function escape (text)
{
  return text.replace(/[<>\&\"\']/g, function(c) {
    return '&#' + c.charCodeAt(0) + ';';
  });
}

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

Ответ 17

Это не отвечает на ваш вопрос, но если вы используете innerHTML, чтобы писать текст внутри элемента, и вы столкнулись с проблемами с кодировкой, просто используйте textContent, i.e.:

var s = "Foo 'bar' baz <qux>";

var element = document.getElementById('foo');
element.textContent = s;

// <div id="foo">Foo 'bar' baz <qux></div>

Ответ 18

Для тех, кто хочет декодировать целочисленный код символа как &#xxx; внутри строки используйте эту функцию:

function decodeHtmlCharCodes(str) { 
  return str.replace(/(&#(\d+);)/g, function(match, capture, charCode) {
    return String.fromCharCode(charCode);
  });
}

// Will output "The show that gained intl reputation!"
console.log(decodeHtmlCharCodes('The show that gained int’l reputation’!'));

Ответ 19

<html>
<body>
<script type="text/javascript">
var str= "&\"'<>";
alert('B4 Change:\n' + str);
str= str.replace(/\&/g,'&amp;');
str= str.replace(/</g,'&lt;');
str= str.replace(/>/g,'&gt;');
str= str.replace(/\"/g,'&quot;');
str= str.replace(/\'/g,'&#039;');
alert('After change:\n' + str);
</script>
</body>
</html>      

используйте это, чтобы проверить: http://www.w3schools.com/js/tryit.asp?filename=tryjs_text

Ответ 20

Да, но если вам нужно вставить результирующую строку где-нибудь, не возвращая ее обратно, вам нужно сделать:

str.replace(/'/g,"'"); // and so on

Ответ 21

См. JavaScript htmlentities http://phpjs.org/functions/htmlentities:425

Ответ 22

public static string HtmlEncode (string text)
{
    string result;
    using (StringWriter sw = new StringWriter())
    {
        var x = new HtmlTextWriter(sw);
        x.WriteEncodedText(text);
        result = sw.ToString();
    }
    return result;

}

Ответ 23

Используйте функцию javaScript escape(), которая позволяет кодировать строки.

например.,

escape("yourString");