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

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

Пример:

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

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

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

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

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

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

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

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('');
}

Из Mozilla ...

Обратите внимание, что 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("✈");

Создайте функцию, которая использует строку 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;
}

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

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

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

ES6

const decodeHtmlCharCodes = str => 
  str.replace(/(&#(\d+);)/g, (match, capture, charCode) => 
    String.fromCharCode(charCode));

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

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);

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

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

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

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

предупреждение (ConvChar ('<- "- & -" -> - <- \' - # - \ '->'));

Результат:

& Lt; - & Quot; - & амп; - & Quot; - & GT; - & л; - & # 039; - & # 035; - & # 039; - & GT;

В теге testarea:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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>

 <!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, используя приведенный выше код.

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

https://github.com/mathiasbynens/he

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

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

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

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

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

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

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>

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

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

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

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

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

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

Мы можем использовать javascript DOMParserдля преобразования специальных символов.

const parser = new DOMParser();
const convertedValue = (parser.parseFromString("&#039 &amp &#039 &lt &gt", "application/xml").body.innerText;

Ниже приведена простая функция для кодирования escape-символов xml в JS.

Encoder.htmlEncode (unsafeText);

Вы можете исправить это, заменив функцию .text () на .html (). он работает для меня.

<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

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

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

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

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

например,

escape("yourString");

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;

}