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.