how do decode the encoded html

Question

here i have a string which has encoded html entities in it. i am trying to decode the string which is containing the html entities inside this.

This is what i have in encoded form

<li>please click <a target="_blank" href="https://app.answers/detail/a_id/140">here</a></li>

i want it to convert it to

<li>please click <a target="_blank" href="https:app.answers/detail/a_id/140">here</a></li>

here is what i have tried.

decodedVal = decodeURI(<li>please click <a target="_blank" href="https://app.answers/detail/a_id/140">here</a></li>)

but i am getting exception URI malformed

how can i do this?

Answer 1

Using jQuery, simply generate a dummy element with the string as HTML content and finally get back the text content using jQuery text() method.

var str = '<li>please click <a target="_blank" href="https://app.answers/detail/a_id/140">here</a></li>';

console.log(
  $('<div/>', {
    html: str
  }).text()
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

---

With pure JavaScript, do the same by generating a dummy DOM element.

var str = '<li>please click <a target="_blank" href="https://app.answers/detail/a_id/140">here</a></li>';

var ele = document.createElement('div');
ele.innerHTML = str;

console.log(
  ele.textContent
)

// or by using jQuery.parseHTML
console.log(
  jQuery.parseHTML(str)[0].textContent
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

There's a few functions in this thread: HTML Entity Decode that decode HTML entities (the result you're looking for) which is different than decoding URI (using decodeURI)

edit: Rather than the answer above I recommend the following (modified from Robert K's response in the linked thread) if you cannot trust the input string you are modifying. You can see an unwanted script executed by adding the following to your input string <img onerror="alert(0)" src=invalid>asdf</img>

decodeEntities = 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;
} 

var str = '&lt;li&gt;please click &lt;a target=&quot;_blank&quot;href=&quot;https://app.answers/detail/a_id/140&quot;&gt;here&lt;/a&gt;&lt;/li&gt;<img onerror="alert(0)" src=invalid>asdf</img>';

var ele = document.createElement('div');
ele.innerHTML = decodeEntities(str);

console.log(
  ele.textContent
)