How to show utf-8 decoded value in vuejs?

Question

Requirement: To decode data of utf8 K& #2446;Ler which is possible by v-html attribute in vuejs

Problem: Don't know how to pass displayFullUserName to data-tooltip which holds value Armin K& #2446;Ler so that it will reflect Armin Koler in grey layout.

Finding The below image shows gibberish data K& #2446;Ler, since it is not rendered by v-html. I have a data-tooltip property which shown below as grey over tooltip view. Now, I don't know how to fix this as actual text rendered above was by v-html tag.

 <label
   v-bind:data-tooltip="displayFullUserName"
   v-html="displayFullUserName"
 />

computed() {
return this.displayFullUserName;
}

one way is like `htmlEntity2utf8(s) { const t= document.createElement('span'); t.innerHTML = s; return t.textContent }` not sure if there's a more modern way to do this common conversion — Bravo, Feb 10 '22 at 05:40
The proper solution would be to not have it HTML encoded in the first place. — gre_gor, Feb 10 '22 at 06:02
And `K& #2446;Ler` doesn't produce "Köler". It should be `Köler`. — gre_gor, Feb 10 '22 at 06:31
@Bravo thanks your solution works. put your solution in answer — raj, Feb 10 '22 at 06:33
@gre_gor thanks for effort, we ned to put in inter html, really appreciate your efforts — raj, Feb 10 '22 at 06:34

score -1 · Answer 1 · answered Feb 10 '22 at 06:33

-1

It worked with below solution

htmlEntity2utf8(s) { 
 const t= document.createElement('span'); t.innerHTML = s; 
 return t.textContent 
}

thanks @Bravo for this.

answered Feb 10 '22 at 06:33

raj

388
5
24

This executes JavaScript. `htmlEntity2utf8('')` – gre_gor Feb 10 '22 at 06:49
@gre_gor - huh? where does `` come from? nothing to do with the OPs code! – Bravo Feb 10 '22 at 07:06
@Bravo It doesn't matter where it comes from. The function is insecure and there are better solutions. – gre_gor Feb 10 '22 at 07:24
@gre_gor "better solutions" ... a) post one of these better solutions, just one, and b) since the original code does `v-html="displayFullUserName"` then the insecurity exists already anyway - surely the `displayUserName` is already sanitised – Bravo Feb 10 '22 at 07:30
@Bravo a) It's in the duplicate target I posted. b) I wouldn't trust it and the function might not be only used in this specific case. Also Q&A on this site need to be useful for future readers which probably won't have sanitized input. – gre_gor Feb 10 '22 at 07:38
@gre_gor - sorry, didn't see the duplicate you posted - my bad - and yes, that is far superior – Bravo Feb 10 '22 at 07:40
@gre_gor - even better because it can be a one liner - `const htmlDecode = input => new DOMParser().parseFromString(input, "text/html").documentElement.textContent;` – Bravo Feb 10 '22 at 07:45

How to show utf-8 decoded value in vuejs?

1 Answers1