How to use jQuery to find content in handle bar template

I want to parse the html within <figure class="kg-card kg-bookmark-card"></figure> in the {{content}} of Ghost post class.

<article class="{{post_class}}">
    <a href="{{url}}">{{title}}</a>
    <script src="{{asset "built/post.js"}}"></script>
    <script>
        getBookmark(`${$({{content}}).find("figure.kg-card kg-bookmark-card:first")}`);
    </script>
</article>

getBookmark() exists in post.js and I am logging it for now but in the future, I want to use the result from parsing the html within <figure class="kg-card kg-bookmark-card"></figure> to modify the href of the article.

The above function is not working and it's throwing "Uncaught SyntaxError: Unexpected token '<' (at ...)". The line of the error is:

getBookmark(`${$({{content}}).find("figure.kg-card kg-bookmark-card:first")}`)

Any idea how to fix this?

Solution

I see a few issues with the code you have posted.

If content is a string of HTML, then you will need to use the triple-mustache tags in order to render it without escaping:{{{content}}}.

Wrapping the entire jQuery expression as a template string will mean JavaScript will see it as a string instead of code to execute. Instead, you want to wrap the backticks around {{{content}}} only.

The selector "figure.kg-card kg-bookmark-card:first" doesn't make sense because kg-bookmark-card is not being used as a class. I think this should be: "figure.kg-card.kg-bookmark-card:first".

The code you want would look more like:

$(function () {
  const $container = $('<div></div>');
  
  $container.html(`{{{content}}}`);

  const $figure = $container.find("figure.kg-card.kg-bookmark-card:first");

  getBookmark($figure);
});

This would pass the jQuery-wrapped figure node to getBookmark.