Перетворення спеціальних символів у HTML у Javascript

Хтось знає, як перетворити спеціальні символи HTMLвJavascript ?

Приклад:

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

Вам потрібна функція, яка виконує щось подібне

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

Але з урахуванням вашого прагнення до різного поводження з одинарними / подвійними цитатами.

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

Примітка: Вам все одно доведеться уникати цитат (подвійних та одинарних) самостійно. Тут ви можете використовувати будь-який із методів, окреслених іншими.

Ця загальна функція кодує кожен не алфавітний символ до його 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 завжди буде повертати значення, яке менше 65536. Це тому, що більш високі кодові точки представлені парою (суттєво оцінених) псевдо-символів, які використовуються для складання реального символу. Через це, для того, щоб вивчити або відтворити повний символ для окремих символів значенням 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;
}

Для тих, хто хоче розшифрувати цілий char код, як &#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();
}

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

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

Результат:

& lt; - & quot; - & amp; - & quot; - & gt; - & lt; - & # 039; - & # 035; - & # 039; - & gt;

У тестареї тег:

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

Якщо ви просто зміните невеликі символи у довгому коді ...

У PREтезі - і в більшості інших тегів HTML - звичайний текст для пакетного файлу, який використовує символи переадресації виводу (<і>), порушить HTML, але ось моя порада : все, що йде в TEXTAREAелементі, - не порушить пробіл HTML, головним чином тому, що ми знаходимось у керуванні, встановленому операційною системою та обробляється ОС, і тому його вміст не аналізується механізмом HTML.

Наприклад, скажіть, що я хочу виділити синтаксис мого пакетного файлу за допомогою javascript. Я просто вставляю код у текстову область, не турбуючись про зарезервовані символи HTML, і маю сценарій обробляти innerHTMLвластивість textarea, яка оцінює текст із зарезервованими символами 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)+";"})}

Або просто націліть на основні символи безпечного кодування, щоб потурбуватися про (&, undebreaks, <,>, "і '), наприклад:

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;

Далі йде проста функція кодування 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

Дивіться htmlentities JavaScript http://phpjs.org/functions/htmlentities:225

Використовуйте функцію 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;

}