javascript - HTML-enhetsdekoding

Hvordan kan jeg kode og dekode HTML-enheter ved hjelp av JavaScript eller JQuery?

var varTitle = "Chris' corner";

Jeg vil at det skal være:

var varTitle = "Chris' corner";

Svar #1

Jeg anbefaler å ikke bruke jQuery-koden som ble akseptert som svaret. Selv om den ikke setter inn strengen som skal dekodes i siden, forårsaker den ting som at skript og HTML-elementer blir opprettet. Dette er mye mer kode enn vi trenger. I stedet foreslår jeg å bruke en tryggere, mer optimalisert funksjon.

var decodeEntities = (function() {
  // this prevents any overhead from creating the object each time
  var element = document.createElement('div');

  function decodeHTMLEntities (str) {
    if(str && typeof str === 'string') {
      // strip script/html tags
      str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
      str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
      element.innerHTML = str;
      str = element.textContent;
      element.textContent = '';
    }

    return str;
  }

  return decodeHTMLEntities;
})();

http://jsfiddle.net/LYteC/4/

For å bruke denne funksjonen, kall bare decodeEntities("&amp;") og den vil bruke de samme underliggende teknikkene som jQuery-versjonen gjør—men uten jQuerys overhead, og etter å ha renset HTML-taggene i inngangen. Se Mike Samuels kommentar på det aksepterte svaret for hvordan man filtrerer ut HTML-tagger.

Denne funksjonen kan enkelt brukes som en jQuery-plugin ved å legge til følgende linje i prosjektet ditt.

jQuery.decodeEntities = decodeEntities;

Svar #2

Du kan prøve noe sånt som:

var Title = $('<textarea />').html("Chris&apos; corner").text();
console.log(Title);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

JS Flette.

En mer interaktiv versjon:

$('form').submit(function() {
  var theString = $('#string').val();
  var varTitle = $('<textarea />').html(theString).text();
  $('#output').text(varTitle);
  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
  <fieldset>
    <label for="string">Enter a html-encoded string to decode</label>
    <input type="text" name="string" id="string" />
  </fieldset>
  <fieldset>
    <input type="submit" value="decode" />
  </fieldset>
</form>

<div id="output"></div>

JS Fiddle.

Svar #3

Rediger 2023: Nå om dagen bør du bruke et bibliotek som he. :

Som Robert K sa, ikke bruk jQuery.html().text() for å dekode HTML-enheter siden det er usikkert fordi brukerinput aldri bør ha tilgang til DOM-en. Les om XSS for hvorfor dette er usikkert.

Prøv i stedet Underscore.js-verktøybiblioteket som kommer med escape- og unescape-metoder:

_.escape(string)

Flykter en streng for innsetting i HTML, og erstatter &, <, >, ", `, og ' tegn.

_.escape('Curly, Larry & Moe');
=> "Curly, Larry &amp; Moe"

_.unescape(string)

Det motsatte av escaping, erstatter &amp;, &lt;, &gt;, &quot;, &#96; og &#x27; med sine uescapede motparter.

_.unescape('Curly, Larry &amp; Moe');
=> "Curly, Larry & Moe"

For å støtte dekoding av flere tegn, kopier bare Underscore unescape-metoden og legg til flere tegn i kartet.

Svar #4

Originalforfatterens svar her.

Dette er min favorittmåte å dekode HTML-tegn på. Fordelen med å bruke denne koden er at tagger også bevares.

function decodeHtml(html) {
    var txt = document.createElement("textarea");
    txt.innerHTML = html;
    return txt.value;
}

Eksempel: http://jsfiddle.net/k65s3/

Inndata :

Entity:&nbsp;Bad attempt at XSS:<script>alert('new\nline?')</script><br>

Utdata :

Entity: Bad attempt at XSS:<script>alert('new\nline?')</script><br>

Svar #5

Her er en rask metode som ikke krever å opprette en div, og som dekoder de "mest vanlige" HTML-escaped tegnene:

function decodeHTMLEntities(text) {
    var entities = [
        ['amp', '&'],
        ['apos', '\''],
        ['#x27', '\''],
        ['#x2F', '/'],
        ['#39', '\''],
        ['#47', '/'],
        ['lt', '<'],
        ['gt', '>'],
        ['nbsp', ' '],
        ['quot', '"']
    ];

    for (var i = 0, max = entities.length; i < max; ++i)
        text = text.replace(new RegExp('&' + entities[i][0] + ';', 'g'), entities[i][1]);

    return text;
}

console.log(decodeHTMLEntities('&amp; &quot;'));

Svar #6

her er en annen versjon:

function convertHTMLEntity(text){
    const span = document.createElement('span');

    return text
    .replace(/&[#A-Za-z0-9]+;/gi, (entity,position,text)=> {
        span.innerHTML = entity;
        return span.innerText;
    });
}

console.log(convertHTMLEntity('Large &lt; &#163; 500'));

Svar #7

Inspirert av Robert Ks løsning fjerner ikke denne versjonen HTML-tags, og er like sikker.

var decode_entities = (function() {
    // Remove HTML Entities
    var element = document.createElement('div');

    function decode_HTML_entities (str) {

        if(str && typeof str === 'string') {

            // Escape HTML before decoding for HTML Entities
            str = escape(str).replace(/%26/g,'&').replace(/%23/g,'#').replace(/%3B/g,';');

            element.innerHTML = str;
            if(element.innerText){
                str = element.innerText;
                element.innerText = '';
            }else{
                // Firefox support
                str = element.textContent;
                element.textContent = '';
            }
        }
        return unescape(str);
    }
    return decode_HTML_entities;
})();

Svar #8

jQuery gir en måte å kode og dekode HTML-enheter på.

Hvis du bruker en "<div/>"-tag, vil den fjerne all HTML.

function htmlDecode(value) {
    return $("<div/>").html(value).text();
}

function htmlEncode(value) {
    return $('<div/>').text(value).html();
}

Hvis du bruker en "