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

Question

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

Пример:

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

Answer 1

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

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

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

Answer 2

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

Для тех, кто хочет декодировать целочисленный код &#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’!'));

ES5

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’!'));

Answer 4

Эта универсальная функция кодирует каждый не алфавитный символ в свой 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 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

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

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

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

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

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

Answer 8

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 9

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

---

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

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

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

Answer 10

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

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

Результат:

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

В теге testarea:

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

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

Answer 11

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

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

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

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

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

Answer 13

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

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

Answer 14

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

https://github.com/mathiasbynens/he

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

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

Answer 15

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>

Answer 16

Вот пара методов, которые я использую без необходимости 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>

Answer 17

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

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

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

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

Answer 18

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

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

Answer 19

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

Answer 20

Я сам боролся с этим в течение довольно долгого времени, но решил использовать это регулярное выражение с отрицательным совпадением, чтобы сопоставить все специальные символы и преобразовать их в соответствующие коды символов:

      var encoded = value.replace(/[^A-Za-z0-9]/g, function(i) {
    return '&#' + i.charCodeAt(0) + ';';
});

Answer 21

Если вы используете lodash , вы можете сделать (скопируйте из документов):

      _.escape('fred, barney, & pebbles');
// => 'fred, barney, & pebbles'

Для получения дополнительной информации: https://lodash.com/docs/4.17.15#escape

Answer 22

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

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

Answer 23

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

Answer 24

<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

Answer 25

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

Encoder.htmlEncode(unsafeText);

Answer 26

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

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

Answer 27

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;

}

Answer 28

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

например,

escape("yourString");