Koduj encje HTML w javascript


108

Pracuję w systemie CMS, który umożliwia użytkownikom wprowadzanie treści. Problem polega na tym, że kiedy dodają symbole ®, może nie wyświetlać się dobrze we wszystkich przeglądarkach. Chciałbym ustawić listę symboli, które należy wyszukać, a następnie przekonwertować na odpowiednią jednostkę html. Na przykład

® => ®
& => &
© => ©
™ =>™

Po konwersji należy go owinąć <sup>tagiem, w wyniku czego:

® => <sup>&reg;</sup>

Ponieważ wymagany jest określony rozmiar czcionki i styl dopełnienia:

sup { font-size: 0.6em; padding-top: 0.2em; }

Czy JavaScript wyglądałby podobnie?

var regs = document.querySelectorAll('®');
  for ( var i = 0, l = imgs.length; i < l; ++i ) {
  var [?] = regs[i];
  var [?] = document.createElement('sup');
  img.parentNode.insertBefore([?]);
  div.appendChild([?]);
}

Gdzie „[?]” Oznacza, że ​​jest coś, czego nie jestem pewien.

Dodatkowe Szczegóły:

  • Chciałbym to zrobić za pomocą czystego JavaScript, a nie czegoś, co wymaga biblioteki takiej jak jQuery, dzięki.
  • Backend to Ruby
  • Korzystanie z RefineryCMS, który jest zbudowany w Ruby on Rails

Jaki jest twój backend? Jeśli jest to php, istnieją funkcje, które zajmą się tym za Ciebie i jestem pewien, że inne języki również je mają. Ponadto Google: developwithstyle.com/articles/2010/06/29/…
— Chris Baker,

5
Lepszym rozwiązaniem może być akceptacja i wyświetlanie tekstu zakodowanego w formacie UTF-8. Każda używana obecnie przeglądarka obsługuje UTF-8. Po stronie HTML chciałbyś dodać accept-charset="UTF-8"do swojego <form>tagu. Na serwerze chciałbyś upewnić się, że twoje dane wyjściowe są zakodowane w UTF-8 i że twój serwer sieciowy informuje przeglądarkę, że tak jest (poprzez Content-Typenagłówek). Zobacz rentzsch.tumblr.com/post/9133498042/… Jeśli zrobisz to wszystko, a przeglądarka nie wyświetla poprawnie znaku, to zastąpienie znaku bytem nie miałoby żadnego znaczenia.
— Paul D. Waite,

@Chris pracuje w systemie CMS zbudowanym w Ruby on Rails.
— JGallardo,

Błędem jest zmiana znaku na odniesienie do encji HTML w JavaScript po stronie klienta, ponieważ JavaScript po stronie klienta działa na DOM, gdzie jednostki nie istnieją. Zawijanie „®” do supelementów powoduje zwykle więcej problemów, niż mogłoby to rozwiązać, ponieważ w wielu czcionkach znak „®” jest mały i znajduje się w indeksie dolnym, więc można go zredukować do nierozpoznawalnego.
— Jukka K. Korpela

@ JukkaK.Korpela, więc biorąc pod uwagę, że muszę rozwiązać problem, że niektóre encje html nie wyświetlają się poprawnie, jak byś to zrobił? A zawijanie <sup>nie stanowi problemu, ponieważ przetestowałem określone czcionki używane w postach na blogu, ale warto to rozważyć.
— JGallardo

Odpowiedzi:


180

Możesz użyć wyrażenia regularnego, aby zastąpić dowolny znak w danym zakresie Unicode jego odpowiednikiem encji html. Kod wyglądałby mniej więcej tak:

var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/g, function(i) {
   return '&#'+i.charCodeAt(0)+';';
});

Ten kod zastąpi wszystkie znaki w podanym zakresie (unicode 00A0 - 9999, a także ampersand, większe i mniejsze niż) ich odpowiednikami encji html, czyli po prostu &#nnn;skąd nnnpochodzi wartość Unicode, z której otrzymujemy charCodeAt.

Zobacz to w akcji tutaj: http://jsfiddle.net/E3EqX/13/ (ten przykład używa jQuery dla selektorów elementów użytych w przykładzie. Sam kod bazowy powyżej nie używa jQuery)

Wykonanie tych konwersji nie rozwiązuje wszystkich problemów - upewnij się, że używasz kodowania znaków UTF8, upewnij się, że Twoja baza danych przechowuje ciągi znaków w UTF8. Państwo nadal mogą zobaczyć przypadki, w których znaki nie są wyświetlane prawidłowo, w zależności od konfiguracji systemu czcionek i innych kwestii poza kontrolą.

Dokumentacja


Dziękuję bardzo za jsfiddle. Aby to zaimplementować. Mogę po prostu dodać to do mojego .jspliku i dodać inne rzeczy do owinięcia <sup>?
— JGallardo,

2
@JGallardo Ponownie napisałem przykład, więc dodaje on suptag (lub inny tag) i jest zawarty w funkcji: jsfiddle.net/E3EqX/4 . Aby z tego skorzystać, musisz skopiować funkcję „encodeAndWrap” do swojego projektu.
— Chris Baker,

1
@Chris dziękuje za zgrabny fragment kodu, chociaż ma jeden błąd: „[\ u00A0- \ u99999]” nie robi tego, czego się spodziewałeś, a raczej równa się ”[\ u00A0- \ u9999] | 9 „- tj. znak „9” zostałby również błędnie zastąpiony przez jednostkę HTML. Możesz też spróbować tego na skrzypcach. Zasugeruję poprawkę odpowiedzi.
— SB

@SB Dzięki za tę notatkę, zdążyłem nawet oddać ostateczne głosowanie zatwierdzające :)
— Chris Baker

1
Chociaż zgadzam się, że odpowiedź @mathias Bynens jest bardziej kompletna, jego rozwiązanie to 84KB, co skłoniło mnie do dalszego poszukiwania alternatywnego. Wydaje się to w porządku, ale czy można również uwzględnić kody charCodes <65 i między> 90 a & <97?
— Florian Mertens

63

Aktualnie zaakceptowana odpowiedź ma kilka problemów. Ten post wyjaśnia je i oferuje solidniejsze rozwiązanie. Rozwiązanie sugerowane w tej odpowiedzi miało:

var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
  return '&#' + i.charCodeAt(0) + ';';
});

iFlaga jest zbędny, ponieważ brak symbolu Unicode w zakresie od U + 00A0 do U + 9999 ma wielkie / małe litery wariant, który jest poza tym samym zakresie.

mFlaga jest zbędny, ponieważ ^albo $nie są stosowane w wyrażeniu regularnym.

Dlaczego zakres od U + 00A0 do U + 9999? Wydaje się arbitralne.

W każdym razie, aby uzyskać rozwiązanie, które poprawnie koduje wszystkie z wyjątkiem bezpiecznych i drukowalnych symboli ASCII na wejściu (w tym symbole astralne!) I implementuje wszystkie nazwane odwołania do znaków (nie tylko te w HTML4), użyj biblioteki he (zastrzeżenie: ta biblioteka jest moja ). Z README:

on (dla „encji HTML”) jest solidnym koderem / dekoderem encji HTML napisanym w JavaScript. Obsługuje wszystkie znormalizowane nazwanych cechy charakteru, jak na HTML , uchwyty niejednoznaczne ampersandy i inne przypadki brzegowe podobnie jak przeglądarka będzie , posiada rozległą zestaw testów, i - w przeciwieństwie do wielu innych rozwiązań JavaScript - on obsługuje astralne symbole Unicode dobrze. Dostępne jest demo online.

Zobacz także tę odpowiednią odpowiedź dotyczącą przepełnienia stosu .


12
Ponadto biblioteka HE ma ... 84 KB! Autch ... Spróbuj pobrać to na telefon komórkowy przez słabsze połączenie. Gdzieś trzeba
— Florian Mertens

1
@FlorianMertens Po minifying + gzip on jest ~ 24 KB. To wciąż duże, ale na koniec dnia, jeśli chcesz poprawnie zdekodować encje HTML, będziesz potrzebować wszystkich danych, które się na nich znajdują - nie da się tego obejść. Jeśli możesz znaleźć sposób na zmniejszenie biblioteki bez wpływu na wydajność, prześlij żądanie ściągnięcia.
— Mathias Bynens

2
@MathiasBynens, bez wątpienia twoja biblioteka jest dobra, ale możesz użyć pola komentarza, aby zaznaczyć problem w zaakceptowanych odpowiedziach i prześlij poprawioną odpowiedź w bloku kodu
— diEcho

3
@drzaus Obrazy mogą być duże, ponieważ przechowują dużo danych, a mniej skompresowanych danych można szybciej zdekodować. Jednak kod programu jest inny, bardzo często dodawana jest cała biblioteka, z której niewiele się korzysta. Kod bibliotek czasami zawiera więcej wierszy niż Twój własny kod! Poza tym niewielu będzie kłopotać się znajdowaniem / debugowaniem problemów z biblioteką i wysyłaniem raportów o błędach (lub nawet aktualizowaniem biblioteki), więc wycieki pamięci lub inne problemy mogą występować w oprogramowaniu z wieloma bibliotekami z niezaznaczonym kodem. Jeśli ktoś chce tylko zakodować / pominąć niebezpieczne znaki html, potrzeba tylko kilku wierszy, a nie 80kb.
— bryc

1
@MarcoKlein Tak, wyjaśniam to w moim poście. To rzeczywiście problem, na który cierpi błędny fragment kodu. Rozwiązanie, które wskazuję, nie ma tego problemu. (patrz „w tym symbole astralne!”)
— Mathias Bynens,

29

Miałem ten sam problem i stworzyłem 2 funkcje do tworzenia bytów i tłumaczenia ich z powrotem na normalne postacie. Poniższe metody tłumaczą dowolny ciąg na encje HTML iz powrotem na prototyp ciągu

/**
 * Convert a string to HTML entities
 */
String.prototype.toHtmlEntities = function() {
    return this.replace(/./gm, function(s) {
        // return "&#" + s.charCodeAt(0) + ";";
        return (s.match(/[a-z0-9\s]+/i)) ? s : "&#" + s.charCodeAt(0) + ";";
    });
};

/**
 * Create string from HTML entities
 */
String.fromHtmlEntities = function(string) {
    return (string+"").replace(/&#\d+;/gm,function(s) {
        return String.fromCharCode(s.match(/\d+/gm)[0]);
    })
};

Możesz go następnie użyć w następujący sposób:

var str = "Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æøπ£¨ ƒ™en tést".toHtmlEntities();
console.log("Entities:", str);
console.log("String:", String.fromHtmlEntities(str));

Wyjście w konsoli:

Entities: &#68;&#105;&#116;&#32;&#105;&#115;&#32;&#101;&#180;&#8224;&#174;&#165;&#168;&#169;&#729;&#8747;&#248;&#8230;&#710;&#402;&#8710;&#247;&#8721;&#8482;&#402;&#8710;&#230;&#248;&#960;&#163;&#168;&#160;&#402;&#8482;&#101;&#110;&#32;&#116;&#163;&#101;&#233;&#115;&#116;
String: Dit is e´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æøπ£¨ ƒ™en t£eést 

To rozwiązanie działa również na tvOS, więc we wszystkich przypadkach może dobrze rozwiązać problemy z kodowaniem.
— loretoparisi

4
Czy to nie jest trochę ekstremalne? Konwertujesz wszystko na encje HTML, nawet „bezpieczne” znaki, takie jak „abc”, „123” ... nawet spacje
— AJPerez,

1
To zła odpowiedź. Ponad 50% dokumentów w Internecie zawiera głównie latin1 z pewnymi utf-8. Twoje kodowanie bezpiecznych znaków zwiększy jego rozmiar o 500% do 600%, bez żadnej korzyści.
— HoldOffHunger

Wyjaśnij przeznaczenie mmodyfikatora wzorca we wzorcu, który nie ma kotwic. Więc masz na myśli użycie swzoru zawierającego kropkę?
— mickmackusa

20

Bez żadnej biblioteki, jeśli nie potrzebujesz obsługi IE <9, możesz stworzyć element html i ustawić jego zawartość za pomocą Node.textContent :

var str = "<this is not a tag>";
var p = document.createElement("p");
p.textContent = str;
var converted = p.innerHTML;

Oto przykład: https://jsfiddle.net/1erdhehv/

Aktualizacja: działa tylko dla encji znaczników HTML (&, <i>).


2
Dlaczego nie użyć innerText zamiast textContent?
— Rick

@Rick, daj szansę dokumentowi MDN dla textContent, do którego link znajduje się w odpowiedzi. Cytując to „textContent i HTMLElement.innerText można łatwo pomylić, ale te dwie właściwości różnią się w istotny sposób ”.
— Adarsha,

Byłoby to świetne rozwiązanie, ale nie koduje „znaku poprawnie.”
— Andreas,

Masz rację. Wygląda na to, że to rozwiązanie może działać tylko dla znaków tagu HTML (<,>, /). Kusi mnie, żeby go usunąć.
— antoineMoPa

19

Możesz tego użyć.

var escapeChars = {
  '¢' : 'cent',
  '£' : 'pound',
  '¥' : 'yen',
  '€': 'euro',
  '©' :'copy',
  '®' : 'reg',
  '<' : 'lt',
  '>' : 'gt',
  '"' : 'quot',
  '&' : 'amp',
  '\'' : '#39'
};

var regexString = '[';
for(var key in escapeChars) {
  regexString += key;
}
regexString += ']';

var regex = new RegExp( regexString, 'g');

function escapeHTML(str) {
  return str.replace(regex, function(m) {
    return '&' + escapeChars[m] + ';';
  });
};

https://github.com/epeli/underscore.string/blob/master/escapeHTML.js

var htmlEntities = {
    nbsp: ' ',
    cent: '¢',
    pound: '£',
    yen: '¥',
    euro: '€',
    copy: '©',
    reg: '®',
    lt: '<',
    gt: '>',
    quot: '"',
    amp: '&',
    apos: '\''
};

function unescapeHTML(str) {
    return str.replace(/\&([^;]+);/g, function (entity, entityCode) {
        var match;

        if (entityCode in htmlEntities) {
            return htmlEntities[entityCode];
            /*eslint no-cond-assign: 0*/
        } else if (match = entityCode.match(/^#x([\da-fA-F]+)$/)) {
            return String.fromCharCode(parseInt(match[1], 16));
            /*eslint no-cond-assign: 0*/
        } else if (match = entityCode.match(/^#(\d+)$/)) {
            return String.fromCharCode(~~match[1]);
        } else {
            return entity;
        }
    });
};

4
Ręczne dodawanie losowego podzbioru znaków, które można zakodować, prawdopodobnie przysporzy problemów Tobie i Twoim współpracownikom. Powinien istnieć jeden organ, dla którego należy kodować znaki, prawdopodobnie przeglądarka lub w przypadku awarii konkretna biblioteka, która prawdopodobnie jest obszerna i obsługiwana.
— user234461

1
Świetna uwaga, @ user234461. Jeśli ktoś znajdzie ten jedyny autorytet, dociekliwe umysły (jak ja) z chęcią się o tym dowiedzą!
— idungotnosn

1
Spowoduje to pominięcie wielu encji html, sunch &rdquo; &uuml; &scaron;itp. Lista wszystkich encji html jest dość długa: freeformatter.com/html-entities.html
— lofihelsinki

7

Jeśli chcesz uniknąć kodowania jednostek HTML więcej niż jeden raz

function encodeHTML(str){
    return str.replace(/([\u00A0-\u9999<>&])(.|$)/g, function(full, char, next) {
      if(char !== '&' || next !== '#'){
        if(/[\u00A0-\u9999<>&]/.test(next))
          next = '&#' + next.charCodeAt(0) + ';';

        return '&#' + char.charCodeAt(0) + ';' + next;
      }

      return full;
    });
}

function decodeHTML(str){
    return str.replace(/&#([0-9]+);/g, function(full, int) {
        return String.fromCharCode(parseInt(int));
    });
}

# Przykład

var text = "<a>Content &#169; <#>&<&#># </a>";

text = encodeHTML(text);
console.log("Encode 1 times: " + text);

// &#60;a&#62;Content &#169; &#60;#&#62;&#38;&#60;&#38;#&#62;# &#60;/a&#62;

text = encodeHTML(text);
console.log("Encode 2 times: " + text);

// &#60;a&#62;Content &#169; &#60;#&#62;&#38;&#60;&#38;#&#62;# &#60;/a&#62;

text = decodeHTML(text);
console.log("Decoded: " + text);

// <a>Content © <#>&<&#># </a>

Jest to przydatne tylko wtedy, gdy na początku masz mieszany tekst z częściowo zmienionymi znakami ucieczki i wprowadza błędy, ponieważ nie może poprawnie zakodować wszystkich ciągów: <#>wyjdzie jako<#&#62;
— Rick

@Rick Dzięki, że mnie o tym powiadomiłeś, zaktualizowałem odpowiedź, aby była lepsza.
— StefansArya

4

Znaki specjalne HTML i jego ESCAPE CODES

Zastrzeżone znaki muszą być chronione kodem HTML: możemy użyć znaku ucieczki, aby przedstawić dowolny znak Unicode [np: & - U + 00026] w HTML, XHTML lub XML, używając tylko znaków ASCII. Odniesienia do znaków numerycznych [ np. Ampersand (&) - &#38;] i Odniesienia do nazwanych znaków [np.: &amp;] To typy character escape used in markup.


Elementy predefiniowane

    Original Character     XML entity replacement    XML numeric replacement  
                  <                                    &lt;                                           &#60;                    
                  >                                     &gt;                                         &#62;                    
                  "                                     &quot;                                      &#34;                    
                  &                                   &amp;                                       &#38;                    
                   '                                    &apos;                                      &#39;                    

Aby wyświetlić znaczniki HTML jako normalny w postaci strony internetowej używamy <pre>, <code>tagi czy możemy im uciec. Zmiana znaczenia dla ciągu znaków poprzez zastąpienie dowolnego wystąpienia "&"znaku w ciągu "&amp;"i wszelkich wystąpień ">"znaku w ciągu "&gt;". Dawny:stackoverflow post

function escapeCharEntities() {
    var map = {
        "&": "&amp;",
        "<": "&lt;",
        ">": "&gt;",
        "\"": "&quot;",
        "'": "&apos;"
    };
    return map;
}

var mapkeys = '', mapvalues = '';
var html = {
    encodeRex : function () {
        return  new RegExp(mapkeys, 'g'); // "[&<>"']"
    }, 
    decodeRex : function () {
        return  new RegExp(mapvalues, 'g'); // "(&amp;|&lt;|&gt;|&quot;|&apos;)"
    },
    encodeMap : JSON.parse( JSON.stringify( escapeCharEntities () ) ), // json = {&: "&amp;", <: "&lt;", >: "&gt;", ": "&quot;", ': "&apos;"}
    decodeMap : JSON.parse( JSON.stringify( swapJsonKeyValues( escapeCharEntities () ) ) ),
    encode : function ( str ) {
        var encodeRexs = html.encodeRex();
        console.log('Encode Rex: ', encodeRexs); // /[&<>"']/gm
        return str.replace(encodeRexs, function(m) { console.log('Encode M: ', m); return html.encodeMap[m]; }); // m = < " > SpecialChars
    },
    decode : function ( str ) {
        var decodeRexs = html.decodeRex();
        console.log('Decode Rex: ', decodeRexs); // /(&amp;|&lt;|&gt;|&quot;|&apos;)/g
        return str.replace(decodeRexs, function(m) { console.log('Decode M: ', m); return html.decodeMap[m]; }); // m = &lt; &quot; &gt;
    }
};

function swapJsonKeyValues ( json ) {
    var count = Object.keys( json ).length;
    var obj = {};
    var keys = '[', val = '(', keysCount = 1;
    for(var key in json) {
        if ( json.hasOwnProperty( key ) ) {
            obj[ json[ key ] ] = key;
            keys += key;
            if( keysCount < count ) {
                val += json[ key ]+'|';
            } else {
                val += json[ key ];
            }
            keysCount++;
        }
    }
    keys += ']';    val  += ')';
    console.log( keys, ' == ', val);
    mapkeys = keys;
    mapvalues = val;
    return obj;
}

console.log('Encode: ', html.encode('<input type="password" name="password" value=""/>') ); 
console.log('Decode: ', html.decode(html.encode('<input type="password" name="password" value=""/>')) );

O/P:
Encode:  &lt;input type=&quot;password&quot; name=&quot;password&quot; value=&quot;&quot;/&gt;
Decode:  <input type="password" name="password" value=""/>

Jest to świetne rozwiązanie do dodawania kodu źródłowego html w formacie Json do ciągu iframe srcdoc.
— Nime Cloud

Nie obejmuje to ®, więc nie pomoże OP. Dodatkowo ten JS jest o wiele bardziej skomplikowany niż wiele innych rozwiązań, nawet tych, które używają tylko krótkiego mapowania, takiego jak ten. swapJsonKeyValues ​​jest źle nazwany, ponieważ wymaga efektów ubocznych (definiowanie kluczy map i wartości map)
— Rick

@mickmackusa Zaktualizowałem post z wartościami debugowania. mprzechowuje znaki specjalne wejściowego ciągu znaków.
— Yash

Jeśli jest jakiś błąd w poście. Spróbuj więc poprawić post i podać komentarze.
— Yash

3
var htmlEntities = [
            {regex:/&/g,entity:'&amp;'},
            {regex:/>/g,entity:'&gt;'},
            {regex:/</g,entity:'&lt;'},
            {regex:/"/g,entity:'&quot;'},
            {regex:/á/g,entity:'&aacute;'},
            {regex:/é/g,entity:'&eacute;'},
            {regex:/í/g,entity:'&iacute;'},
            {regex:/ó/g,entity:'&oacute;'},
            {regex:/ú/g,entity:'&uacute;'}
        ];

total = <some string value>

for(v in htmlEntities){
    total = total.replace(htmlEntities[v].regex, htmlEntities[v].entity);
}

Rozwiązanie macierzowe


3
Proszę wyjaśnić, w jaki sposób rozwiązuje to problem w wyjątkowy, lepszy sposób niż powyżej. Na pierwszy rzut oka mogłoby się wydawać, że to rozwiązanie jest wolniejsze, ponieważ modyfikuje ciąg w wielu przebiegach zamiast wszystkich w jednym. Jednak mogę się mylić. Tak czy inaczej, musisz utworzyć kopię zapasową swojego posta z wyjaśnieniem.
— Jack Giffin

Jest to alternatywa, możesz użyć wyrażenia regularnego bezpośrednio z tablicy ...: D
— Cesar De la Cruz

To jest jedno wyrażenie regularne dla każdego znaku (dla v w…). Jeśli chciałbyś objąć całość UTF-8, byłoby to 65 000 wyrażeń regularnych i 65 000 linii wykonania.
— HoldOffHunger

2
Interesuje mnie tylko konwersja trzech znaków na encje, więc ta odpowiedź jest lepsza w moim przypadku i cieszę się, że to było tutaj
— Drew

2

Jeśli już używasz jQuery, spróbuj html().

$('<div>').text('<script>alert("gotcha!")</script>').html()
// "&lt;script&gt;alert("gotcha!")&lt;/script&gt;"

Tworzona jest instancja węzła tekstowego w pamięci i html()jest na nim wywoływana.

Jest brzydki, marnuje trochę pamięci i nie mam pojęcia, czy jest tak dokładny, jak coś w rodzaju hebiblioteki, ale jeśli już używasz jQuery, może to jest opcja dla Ciebie.

Zaczerpnięte z wpisu na blogu Koduj encje HTML za pomocą jQuery autorstwa Felixa Geisendörfera.


3
Aby uniknąć tworzenia instancji węzła za każdym razem, możesz zapisać węzeł: var converter=$("<div>");a później użyć go ponownie: html1=converter.text(text1).html(); html2=converter.text(text2).html();...
— FrancescoMM

1

Czasami chcesz po prostu zakodować każdy znak ... Ta funkcja zastępuje „wszystko, ale nic” w regxp.

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


1
Zastąpić ^przez .do emotikony konserwowa: function encode(e){return e.replace(/[.]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}.
— Swiss Mister

1

Sprawdź samouczek z Ourcodeworld Ourcodeworld - kodowanie i dekodowanie encji HTML za pomocą javascript

Co najważniejsze, przykład biblioteki he

he.encode('foo © bar ≠ baz ???? qux');
// → 'foo &#xA9; bar &#x2260; baz &#x1D306; qux'

// Passing an `options` object to `encode`, to explicitly encode all symbols:
he.encode('foo © bar ≠ baz ???? qux', {
 'encodeEverything': true
});

he.decode('foo &copy; bar &ne; baz &#x1D306; qux');
// → 'foo © bar ≠ baz ???? qux'

Ta biblioteka prawdopodobnie ułatwiłaby kodowanie i lepiej zarządzałaby nim. Jest popularny, regularnie aktualizowany i zgodny ze specyfikacją HTML. Samo w sobie nie ma żadnych zależności, co widać w pliku package.json


OP poprosił o vanilla JS i vanilla JS oferuje element.innerText. Jeśli biblioteka ma jakąś przewagę, dodaj ją do odpowiedzi.
— Rick

0

Oto jak zaimplementowałem kodowanie. Inspirację zaczerpnąłem z odpowiedzi udzielonych powyżej.

function encodeHTML(str) {
  const code = {
      ' ' : '&nbsp;',
      '¢' : '&cent;',
      '£' : '&pound;',
      '¥' : '&yen;',
      '€' : '&euro;', 
      '©' : '&copy;',
      '®' : '&reg;',
      '<' : '&lt;', 
      '>' : '&gt;',  
      '"' : '&quot;', 
      '&' : '&amp;',
      '\'' : '&apos;'
  };
  return str.replace(/[\u00A0-\u9999<>\&''""]/gm, (i)=>code[i]);
}

// TEST
console.log(encodeHTML("Dolce & Gabbana"));
console.log(encodeHTML("Hamburgers < Pizza < Tacos"));
console.log(encodeHTML("Sixty > twelve"));
console.log(encodeHTML('Stuff in "quotation marks"'));
console.log(encodeHTML("Schindler's List"));
console.log(encodeHTML("<>"));


przerwy na dowolne dane wejściowe w \ u00A0- \ u9999, których nie ma na Twojej liście
— Rick,

Wyjaśnij przeznaczenie mmodyfikatora wzorca we wzorcu, który nie ma kotwic.
— mickmackusa

0

jeden z łatwych sposobów kodowania lub dekodowania jednostek HTML
po prostu Wywołanie funkcji z jednym argumentem ...

Dekoduj encje HTML

function decodeHTMLEntities(text) {
  var textArea = document.createElement('textarea');
  textArea.innerHTML = text;
  return textArea.value;
}

Dekoduj encje HTML (JQuery)

function decodeHTMLEntities(text) {
  return $("<textarea/>").html(text).text();
}

Koduj encje HTML

function encodeHTMLEntities(text) {
  var textArea = document.createElement('textarea');
  textArea.innerText = text;
  return textArea.innerHTML;
}

Koduj encje HTML (JQuery)

function encodeHTMLEntities(text) {
  return $("<textarea/>").text(text).html();
}

-1

Możesz użyć tej charCodeAt()metody, aby sprawdzić, czy określony znak ma wartość większą niż 127 i przekonwertować go na numeryczne odwołanie do znaku za pomocą toString(16).


4
Byłoby miło, gdybyś mógł dodać trochę o magicznej liczbie 127i jak / dlaczego to działa;)
— yckart

-1
replaceHtmlEntities(text) {
  var tagsToReplace = {
    '&amp;': '&',
    '&lt;': '<',
    '&gt;': '>',
  };
  var newtext = text;
  for (var tag in tagsToReplace) {
    if (Reflect.apply({}.hasOwnProperty, this, [tagsToReplace, tag])) {
      var regex = new RegExp(tag, 'g');
      newtext = newtext.replace(regex, tagsToReplace[tag]);
    }
  }
  return newtext;
}

-1

<!DOCTYPE html>
<html>
<style>
button {
backround: #ccc;
padding: 14px;
width: 400px;
font-size: 32px;
}
#demo {
font-size: 20px;
font-family: Arial;
font-weight: bold;
}
</style>
<body>

<p>Click the button to decode.</p>

<button onclick="entitycode()">Html Code</button>

<p id="demo"></p>


<script>
function entitycode() {
  var uri = "quotation  = ark __ &apos; = apostrophe  __ &amp; = ampersand __ &lt; = less-than __ &gt; = greater-than __ 	non- = reaking space __ &iexcl; = inverted exclamation mark __ &cent; = cent __ &pound; = pound __ &curren; = currency __ &yen; = yen __ &brvbar; = broken vertical bar __ &sect; = section __ &uml; = spacing diaeresis __ &copy; = copyright __ &ordf; = feminine ordinal indicator __ &laquo; = angle quotation mark (left) __ &not; = negation __ &shy; = soft hyphen __ &reg; = registered trademark __ &macr; = spacing macron __ &deg; = degree __ &plusmn; = plus-or-minus  __ &sup2; = superscript 2 __ &sup3; = superscript 3 __ &acute; = spacing acute __ &micro; = micro __ &para; = paragraph __ &middot; = middle dot __ &cedil; = spacing cedilla __ &sup1; = superscript 1 __ &ordm; = masculine ordinal indicator __ &raquo; = angle quotation mark (right) __ &frac14; = fraction 1/4 __ &frac12; = fraction 1/2 __ &frac34; = fraction 3/4 __ &iquest; = inverted question mark __ &times; = multiplication __ &divide; = division __ &Agrave; = capital a, grave accent __ &Aacute; = capital a, acute accent __ &Acirc; = capital a, circumflex accent __ &Atilde; = capital a, tilde __ &Auml; = capital a, umlaut mark __ &Aring; = capital a, ring __ &AElig; = capital ae __ &Ccedil; = capital c, cedilla __ &Egrave; = capital e, grave accent __ &Eacute; = capital e, acute accent __ &Ecirc; = capital e, circumflex accent __ &Euml; = capital e, umlaut mark __ &Igrave; = capital i, grave accent __ &Iacute; = capital i, acute accent __ &Icirc; = capital i, circumflex accent __ &Iuml; = capital i, umlaut mark __ &ETH; = capital eth, Icelandic __ &Ntilde; = capital n, tilde __ &Ograve; = capital o, grave accent __ &Oacute; = capital o, acute accent __ &Ocirc; = capital o, circumflex accent __ &Otilde; = capital o, tilde __ &Ouml; = capital o, umlaut mark __ &Oslash; = capital o, slash __ &Ugrave; = capital u, grave accent __ &Uacute; = capital u, acute accent __ &Ucirc; = capital u, circumflex accent __ &Uuml; = capital u, umlaut mark __ &Yacute; = capital y, acute accent __ &THORN; = capital THORN, Icelandic __ &szlig; = small sharp s, German __ &agrave; = small a, grave accent __ &aacute; = small a, acute accent __ &acirc; = small a, circumflex accent __ &atilde; = small a, tilde __ &auml; = small a, umlaut mark __ &aring; = small a, ring __ &aelig; = small ae __ &ccedil; = small c, cedilla __ &egrave; = small e, grave accent __ &eacute; = small e, acute accent __ &ecirc; = small e, circumflex accent __ &euml; = small e, umlaut mark __ &igrave; = small i, grave accent __ &iacute; = small i, acute accent __ &icirc; = small i, circumflex accent __ &iuml; = small i, umlaut mark __ &eth; = small eth, Icelandic __ &ntilde; = small n, tilde __ &ograve; = small o, grave accent __ &oacute; = small o, acute accent __ &ocirc; = small o, circumflex accent __ &otilde; = small o, tilde __ &ouml; = small o, umlaut mark __ &oslash; = small o, slash __ &ugrave; = small u, grave accent __ &uacute; = small u, acute accent __ &ucirc; = small u, circumflex accent __ &uuml; = small u, umlaut mark __ &yacute; = small y, acute accent __ &thorn; = small thorn, Icelandic __ &yuml; = small y, umlaut mark";
  var enc = encodeURI(uri);
  var dec = decodeURI(enc);
  var res = dec;
  document.getElementById("demo").innerHTML = res;
}
</script>

</body>
</html>


To nie wydaje się odpowiadać na pytanie i jest to tylko odpowiedź na kod. Opisz, co robi kod i jaki ma związek z pytaniem.
— Rick
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.