Konwertuj znaki specjalne na HTML w JavaScript

Czy ktoś wie, jak przekonwertować znaki specjalne na HTMLin Javascript?

Przykład:

• &(ampersand) staje się &amp.
• "(podwójny cudzysłów) zmienia się na &quotkiedy ENT_NOQUOTESnie jest ustawione.
• '(pojedynczy cudzysłów) staje się &#039tylko wtedy, gdy ENT_QUOTESjest ustawiony.
• <(mniej niż) staje się &lt.
• >(większe niż) staje się &gt.

Potrzebujesz funkcji, która robi coś podobnego

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

Ale biorąc pod uwagę twoje pragnienie innego traktowania pojedynczych / podwójnych cudzysłowów.

Moim zdaniem najlepszym sposobem jest użycie wbudowanej funkcji ucieczki HTML przeglądarki do obsługi wielu przypadków. Aby to zrobić, po prostu utwórz element w drzewie DOM i ustaw innerTextelement na swój łańcuch. Następnie pobierz innerHTMLelement. Przeglądarka zwróci ciąg zakodowany w formacie HTML.

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

Testowe uruchomienie:

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

Wynik:

&;'><"

Ta metoda ucieczki z HTML jest również używana przez bibliotekę Prototype JS, choć inaczej niż w uproszczonym przykładzie, który podałem.

Uwaga: nadal będziesz musiał samodzielnie zmieniać cudzysłowy (podwójne i pojedyncze). Możesz użyć dowolnej metody przedstawionej tutaj przez innych.

Ta funkcja ogólna koduje każdy znak niealfabetyczny do jego kodu HTML (numeryczny):

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

Z Mozilli ...

Należy pamiętać, że charCodeAt zawsze zwraca wartość mniejszą niż 65 536. Dzieje się tak, ponieważ wyższe punkty kodowe są reprezentowane przez parę (o niższej wartości) „zastępczych” pseudoznaków, które są używane do tworzenia rzeczywistego znaku. Z tego powodu, aby zbadać lub odtworzyć pełny znak dla poszczególnych znaków o wartości 65 536 i więcej, dla takich znaków konieczne jest pobranie nie tylko charCodeAt (i), ale także charCodeAt (i + 1) (tak jakby / odtwarzając ciąg z dwoma> literami).

Najlepszym rozwiązaniem

/**
 * (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;
}

Przykład użycia:

html_encode("✈");

Utwórz funkcję, która używa ciągu 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;
}

Dla tych, którzy chcą zdekodować kod znaku będący liczbą całkowitą, jak &#xxx;wewnątrz ciągu, użyj tej funkcji:

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

Jak wspomniano, dragonnajczystszym sposobem na to jest 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, funkcja (y) {return c [s];});
}

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

Wynik:

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

W tagu obszaru testowego:

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

Jeśli zmienisz trochę znaków w długim kodzie ...

W PREtagu - iw większości innych tagów HTML - zwykły tekst dla pliku wsadowego, który używa wyjściowych znaków przekierowania (<i>), zepsuje HTML, ale oto moja wskazówka : wszystko idzie w TEXTAREAelemencie - nie zepsuje HTML, głównie dlatego, że znajdujemy się wewnątrz elementu sterującego umieszczonego w instancji i obsługiwanego przez system operacyjny, a zatem jego zawartość nie jest analizowana przez silnik HTML.

Na przykład załóżmy, że chcę podświetlić składnię mojego pliku wsadowego za pomocą javascript. Po prostu wklejam kod w obszar tekstowy, nie martwiąc się o znaki zastrzeżone HTML, i każę skryptowi przetwarzać innerHTMLwłaściwość obszaru tekstowego, który ocenia tekst z zastrzeżonymi znakami HTML zastępowanymi przez odpowiadające im encje ISO-8859-1.

Przeglądarki automatycznie zmieniają znaczenie znaków specjalnych podczas pobierania właściwości innerHTML(i outerHTML) elementu. Korzystanie z obszaru tekstowego (a kto wie, może wpisywania tekstu) po prostu oszczędza wykonanie konwersji (ręcznie lub za pomocą kodu).

Używam tej sztuczki do testowania mojego wyróżniacza składni, a kiedy kończę tworzenie i testowanie, po prostu ukrywam obszar tekstu.

Jeśli potrzebujesz wsparcia dla wszystkich standardowych nazwanych odniesień do znaków , Unicode i niejednoznacznych ampersandów , biblioteka he jest jedynym w 100% niezawodnym rozwiązaniem, jakie znam!

Przykładowe zastosowanie

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

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

obejście:

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

Kolejny, którego teraz używamy, działa. Jeden powyżej, zamiast tego wywołuje skrypt i zwraca przekonwertowany kod. Dobry tylko na małych obszarach tekstowych (co oznacza, że ​​nie jest pełny w artykule / blogu itp.)

Powyżej. Działa na większości znaków.

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("--", "--", "'",  "'",  '"',  '"',  "*",  "...", "™", "•", "•", "•", "¡", "¢", "£", "¤", "¥", "¦", "§", "¨", "©", "ª", "«", "¬", "­", "®", "¯", "°", "±", "²", "³", "´", "µ", "¶", "·", "¸", "¹", "º", "»", "¼", "½", "¾", "¿", "À", "Á", "Â", "Ã", "Ä", "Å", "Æ", "Ç", "È", "É", "Ê", "Ë", "Ì", "Í", "Î", "Ï", "Ð", "Ñ", "Ò", "Ó", "Ô", "Õ", "Ö", "×", "Ø", "Ù", "Ú", "Û", "Ü", "Ý", "Þ", "ß", "à", "á", "â", "ã", "ä", "å", "æ", "ç", "è", "é", "ê", "ë", "ì", "í", "î", "ï", "ð", "ñ", "ò", "ó", "ô", "õ", "ö", "÷", "ø", "ù", "ú", "û", "ü", "ý", "þ", "ÿ", "Œ", "œ", "Š", "š", "Ÿ", "ƒ");

Tworzę plik javascript, który ma wiele funkcji, w tym powyższe. http://www.neotropicsolutions.com/JSChars.zip

Zawiera wszystkie potrzebne pliki. Dodałem jQuery 1.4.4. Po prostu dlatego, że widziałem problemy w innych wersjach, ale jeszcze ich nie wypróbowałem.

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>

możesz po prostu przekonwertować znaki specjalne na html używając powyższego kodu.

Oto dobra biblioteka, którą uważam za bardzo przydatną w tym kontekście.

https://github.com/mathiasbynens/he

Według jego autora:

Obsługuje wszystkie znormalizowane nazwane odwołania do znaków zgodnie z HTML, obsługuje niejednoznaczne znaki ampersand i inne przypadki skrajne, tak jak przeglądarka, ma obszerny zestaw testów i - w przeciwieństwie do wielu innych rozwiązań JavaScript - doskonale radzi sobie z astralnymi symbolami Unicode

Oto kilka metod, których używam bez Jquery:

Możesz zakodować każdy znak w swoim ciągu:

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

Lub po prostu kieruj reklamy na główne znaki bezpiecznego kodowania, o które należy się martwić (&, inebreaks, <,>, "i '), na przykład:

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("<>&'\""));

To nie jest bezpośrednią odpowiedzią na twoje pytanie, ale jeśli używasz innerHTMLdo pisania tekstu w elemencie i napotkałeś problemy z kodowaniem, po prostu użyj textContent:

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

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

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

Do DOMParserkonwersji znaków specjalnych możemy użyć javascript .

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

Poniżej znajduje się prosta funkcja do kodowania znaków ucieczki XML w JS

Encoder.htmlEncode (unsafeText);

Możesz to naprawić, zastępując funkcję .text () na .html (). to działa dla mnie.

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

użyj tego do przetestowania: http://www.w3schools.com/js/tryit.asp?filename=tryjs_text

Tak, ale jeśli chcesz gdzieś wstawić wynikowy ciąg bez jego konwersji z powrotem, musisz to zrobić:

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

Zobacz JavaScript htmlentities http://phpjs.org/functions/htmlentities:425

Użyj funkcji escape () javaScript , która umożliwia kodowanie ciągów.

na przykład,

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;

}