Instantsearch snippet is showing the html comment lines

I have set up the hits templates like the attached screenshot, but this is still showing the html comment lines in the UI,
I also tried removing the tags using transformItems but no success.

searchTwo.addWidgets([
    instantsearch.widgets.searchBox({
        container: "#searchBoxPage",
        searchAsYouType: false,
        placeholder: "Search The Site",
    }),

    instantsearch.widgets.refinementList({
        container: "#tags-list-page",
        attribute: "tags",
        limit: 5,
        showMore: true,
    }),

    instantsearch.widgets.configure({
        attributesToSnippet: ["post_content:30"],
        hitsPerPage: 10,
    }),

    instantsearch.widgets.hits({
        container: "#hits-page",
        transformItems(items) {
            return items.map((item) => {
                return {
                    ...item,
                    post_content: item.post_content.replace(/<\!--.*?-->/g, ""),
                };
            });
        },
        templates: {
            item(hit) {
                return `
                    <article>
                        <a href="/${hit.post_name}">
                            <strong>
                                ${hit.post_title}
                            </strong>
                        </a>
                        <p>
                            ${instantsearch.snippet({
                                attribute: "post_content",
                                hit,
                            })}
                        </p>
                    </article>
                `;
            },
        },
    }),

    instantsearch.widgets.pagination({
        container: "#pagination-page",
        // Optional parameters
        showFirst: true,
        showPrevious: true,
        showNext: true,
        showLast: true,
        totalPages: 5,
    }),
]);

searchTwo.start();

This is how it shows in UI
Screen Shot 2022-06-06 at 7.27.33 PM

Hi! I’m not able to see the screenshot in your post. Also, I’m confused – are the HTML comment lines somehow part of the record attribute?

Thank you for responding chuck,
I have highlighted the screenshot, can you please check now.
Also, the html comment lines are part of the post_content field in wp_posts table

I wish I was a better front end dev – this is a little beyond my front end abilities, but I suspect you replace isn’t altering the original hit, which means snippet is dealign with the original value. I’d say try mutating the record in the template, but I’m not even sure if that would work within the context of “snippet”. This might be worth cutting an issue ticket on the instantearch repo to get help from the experts.

This happens because the characters are already escaped when they arrive at transformItems. Instead you will need to probably do something like

                    post_content: item.post_content.replace(/&gt;\!--.*?-->/g, ""),

I tried the solution you provide still no success.
Html comment lines are still showing, check the screenshot below

Yeah i think that is the issue, snippet is directly dealing with the original value,
Can you show me how can i mutate the record?

I’ve asked internally to see if there are any suggestions. Initial comments are that these should be stripped as you build the index (which really is the best approach but I know it doesn’t help you here).

I’ll keep digging in for a better pattern internally.

Oh, of course, the snippet uses item._snippetResult.post_content.value, so that’s the one that needs to be modified, sorry for missing that you used it in snippet

1 Like