kaushalmodi / hugo-search-fuse-js

Hugo theme component for implementing static site search using Fuse.js
https://hugo-search-fuse-js.netlify.app/
GNU General Public License v3.0
68 stars 23 forks source link

Where or how to unescape HTML codes in search results? #4

Closed McFateM closed 4 years ago

McFateM commented 5 years ago

This is awesome! Just having one problem that I'm not sure how to resolve...

I have some search results returning:

Juan’s blog post does a nice job of covering the steps necessary to engage Watchtower, GitHub, and an au…

Wondering where and how I can unescape my search results so that it displays as intended? Like so:

Juan's blog post does a nice job of covering the steps necessary to engage Watchtower, GitHub, and an au…
kaushalmodi commented 5 years ago

I'm afraid I am unable to help you out with this. This project is simply creating a Hugo Component around the JavaScript code that other awesome developers have worked on.

As I don't have JavaScript knowledge, I won't be able to help you if the issue you are seeing has to so with the JS code.

In any case, I'd suggest that you point me to a minimal example site repo that reproduces this issue. That way, me or someone else can debug and attempt to fix it.

kaushalmodi commented 5 years ago

I have a guess what might be causing this issue. I'll have a look today if I get a chance.

McFateM commented 5 years ago

Thanks! I have a similar situation… not a Javascript expert. I did fumble in the JS code a bit yesterday and thought I’d found a solution using calls to the JS unescape() function inside search.js and the ‘populateResults()’ function, but it didn’t work properly. If I find a fix that works I’ll be sure to let you know.

On May 24, 2019, at 6:49 AM, Kaushal Modi notifications@github.com<mailto:notifications@github.com> wrote:

I have a guess what might be causing this issue. I'll have a look today if I get a chance.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_kaushalmodi_hugo-2Dsearch-2Dfuse-2Djs_issues_4-3Femail-5Fsource-3Dnotifications-26email-5Ftoken-3DACAURQJGCYUTAVOC5P3UHXDPW7I4FA5CNFSM4HPL6DW2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWFBYIQ-23issuecomment-2D495590434&d=DwMCaQ&c=HUrdOLg_tCr0UMeDjWLBOM9lLDRpsndbROGxEKQRFzk&r=PQglHQe-EzyZqJOuOVcmU0OZ6bg-89msSPuqyNlQr28&m=7xyC1QGoE_j7oNFK_0t4tXwwIWQUM1OVAlrFLD22hCQ&s=GAfhPNtKr1uQmJYTtiD7L0OH2NAVdinSzuQ4pbms37Y&e=, or mute the threadhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_ACAURQMMCVJQRYAXHS25XTDPW7I4FANCNFSM4HPL6DWQ&d=DwMCaQ&c=HUrdOLg_tCr0UMeDjWLBOM9lLDRpsndbROGxEKQRFzk&r=PQglHQe-EzyZqJOuOVcmU0OZ6bg-89msSPuqyNlQr28&m=7xyC1QGoE_j7oNFK_0t4tXwwIWQUM1OVAlrFLD22hCQ&s=hnkWpeeT3B6iE_r-bum8wHdU_qglfpto4UjtvxDLqu8&e=.

SummittDweller commented 5 years ago

I've confirmed that I can replace the "snippet" text by replacing line 73 in search.js. That line reads...

frag.querySelector(".search_snippet").textContent = snippet;

Unfortunately, I'm not sure how to replace that string? But changing it to this does not work:

frag.querySelector(".search_snippet").textContent = unescape(snippet);
SummittDweller commented 5 years ago

I figured this out. WIll post the solution here when I return (in an hour).

SummittDweller commented 5 years ago

Turns out Javascript's unescape() function is deprecated, and more importantly, it's ancient and only covers a small subset of all HTML codes. The codes in my text were generally not covered, and its replacement function, decodeURI(), apparently isn't a good fit either.

I found the fix that I applied as indicated in the comment below. The new code snippet in search.js and the populateResults() function is:

...
    snippet += "…";

    // Lifted from https://stackoverflow.com/posts/3700369/revisions
    var elem = document.createElement('textarea');
    elem.innerHTML = snippet;
    var decoded = elem.value;

    // Pull template from hugo template definition
    let frag = document.getElementById('search-result-template').content.cloneNode(true);
...