HTML Entities Decoder Methods

2 options for decoder HTML entities

by jamesbrndwgn

HTML

<div id="app">
  
  Default: {{ msg }}
  <br><br>
  Dom Decoder: {{ domDecoder(msg) }}
  <br><br>
  Text Decoder: {{ decoder(msg) }}
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

new Vue({
  el: "#app",
  
  data: {
  	msg: 'Die s&#xFC;&#xDF;e H&#xFC;ndin &amp; die B&#xE4;ren laufen in die H&#xF6;hle'
  },
  
  methods: {
  	// DOMParser technically still working draft, but quite well supported. https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
  	domDecoder (str) {
    	let parser = new DOMParser();
      let dom = parser.parseFromString('<!doctype html><body>' + str, 'text/html');
      return dom.body.textContent;
    },
    
    decoder (str) {
    	var textArea = document.createElement('textarea');
      textArea.innerHTML = str;
      return textArea.value;
    }
  }
})