0

I'm trying to remove ' from my string. How to do that? I'm using ajax with JSON. My code looks like this:

<html>
    <body>
    <p id="testHTML"></p>
    </body>
    <script type="text/javascript">
            
        $(document).ready(function() {
            $.ajaxSetup({ cache: false });
            setInterval(function() {
                $.getJSON("IOCounter.html", function(data) {
                    $('#testHTML').text(data.testHTML);
                });
            }, 2000); //Refreshrate in ms
        });
    </script>
    </html>

Inside testHTML, I get the string "HelloWorld" from IOCounter.html but when I display it inside index.html I get:

&#x27;HelloWorld&#x27;

Now I just want to remove &#x27; to get only HelloWorld. What do I have to do?

Kunal Kukreja
  • 737
  • 4
  • 18
Sfedo
  • 21
  • 1
  • 8
  • The string returned is `html` encoded. To decode, use this: https://stackoverflow.com/a/34064434 – Kunal Kukreja Aug 19 '20 at 08:22
  • I've seen this post before, but I cant get where to place htmlDecode in my own code and how to use it with p tag... Sorry I'm very new into coding with html and javascript – Sfedo Aug 19 '20 at 08:28
  • Just decode it before adding the element. Seeing your code, it seems, you would need to decode `data.testHTML` and then set it to `#testHTML`. e.g. ```$('#testHTML').text(htmlDecode(data.testHTML));``` . Just make sure `htmlDecode` function is defined and available. – Kunal Kukreja Aug 19 '20 at 08:40
  • ok thank you so far, my HTML decodes it now, but the refresh function doesnt work – Sfedo Aug 19 '20 at 08:59
  • It should work. Since you are receiving the `data` once, then the request must also be working fine. If not, then chain your getJSON with a `.fail()` and add a callback to check the `error`. – Kunal Kukreja Aug 19 '20 at 10:26
  • Added the solution to an answer so that it helps others. – Kunal Kukreja Aug 22 '20 at 14:24

2 Answers2

1

The string returned is HTML encoded. To get a plain text string, it needs to be decoded.

DOMParser (supported in most browsers) can be used to decode the string as follows:

function htmlDecode(str) {
    const doc = new DOMParser().parseFromString(str, "text/html");
    return doc.documentElement.textContent;
}

Using this, you can decode the string and then set it to #textHTML.

$.getJSON("IOCounter.html", function(data) {
    $('#testHTML').text(htmlDecode(data.testHTML));
});
Kunal Kukreja
  • 737
  • 4
  • 18
0

Homemade solution

You can decode the Unicode characters with this function :

export const unicodeDecode = (text: string) => {
  const decoded = text.replace(/&#x([0-9a-f]+);/gi, (_, code) =>
    String.fromCharCode(parseInt(code, 16))
  );
  return decoded;
};

It will replace all #...; like &#x27; by the Unicode characters.

In the callback function of replace, we take the code (for &#x27; its 27) and we replace it by its UTF value using String.fromCharCode(parseInt(code, 16))

Node.JS solution

Alternatively, in a Node.js application, you can use node-html-parser !

Found in this answer

import { parse } from 'node-html-parser';

const root = parse('<ul id="list"><li>Hello World</li></ul>');
console.log(root.querySelector('#list'));

DOM Solution

function htmlDecode(str) {
    const doc = new DOMParser().parseFromString(str, "text/html");
    return doc.documentElement.textContent;
}

(from the first answer)

But in all case, the homemade solution will work.

Melvynx
  • 912
  • 1
  • 6
  • 20