How to wrap a string with a html tag in hyperHTML through RegEx replace

Question

I'm building a search auto-suggest component where the results are rendered with hyperHTML. The matching string part of the suggestions returned from the server should be highlighted.

I'm using a RegEx and String.prototype.replace to highlight the matching part, but somehow I can't manage to output the return value of it to HTML. It just renders the  tags as strings.

I tried quite a bit of different approaches to solve this but without any success and am running out of ideas...

This is my rendering function:

const suggestionsContainer = document.querySelector(
  ".js-suggestions-container"
);
const suggestions = [{
    title: "lorem ipsum dolor sit amet",
    url: "#"
  },
  {
    title: "lorem ipsum dolor sit amet",
    url: "#"
  }
];
let query = "ipsum";

function renderSuggestions(suggestions, query) {
  const queryRegEx = new RegExp(query, "gi");
  hyperHTML.bind(suggestionsContainer)`
      ${suggestions.map((suggestion) => hyperHTML.wire(suggestion)`
        <a href="${suggestion.url}">
          ${hyperHTML.wire()`${suggestion.title.replace(queryRegEx, "<strong>$&</strong>")}`}
        </a>
      `)}
  `;
}

renderSuggestions(suggestions, query);

a {
  display: block;
  margin: 1rem 0;
}

<script src="https://unpkg.com/hyperhtml@latest/min.js"></script>
<div class="js-suggestions-container"></div>

Are you sure you need to put the tag as <bold> instead of  ? And also I'd suggest rather something like ... as the b-tag should be used as a last resort. — casenonsensitive
– casenonsensitive, Commented Jul 14, 2020 at 17:00
@casenonsensitive Yes, you're right. I'd meant to use  and not <bold>. I edited the post to correct it. But that doesn't change anything about the main problem that the tag is not rendered as html but as a string, regardless of the kind of html tag I use. — Felix Wienberg
– Felix Wienberg, Commented Jul 14, 2020 at 17:12
I'm guessing the a element is created correctly, so the problem would be inside it. Have you tried making it more easy, replacing the ${wire()`${suggestion.title.replace(queryRegEx, '$&')}`} with ${suggestion.title.replace(queryRegEx, '$&')} ? — casenonsensitive
– casenonsensitive, Commented Jul 14, 2020 at 20:13
@casenonsensitive Yes, tried that as well. Makes no difference. I replaced the code example in my original question with a runnable code snippet to make it a bit easier to understand/reproduce. — Felix Wienberg
– Felix Wienberg, Commented Jul 15, 2020 at 5:32

Andrea Giammarchi · Accepted Answer · 2020-07-15 07:53:01Z

2

As you can see in this CodePen, the only change you need is to explicitly ask for html:

  ${suggestions.map((suggestion) => hyperHTML.wire(suggestion)`
    <a href="${suggestion.url}">
      ${{html: suggestion.title.replace(queryRegEx, "<strong>$&</strong>")}}
    </a>
  `)}

The {html: ...} is the most obvious way, but hyperHTML also injects arrays as HTML, but that might be unexpected, while both lighterhtml and micro html are safer by default, and interpolated content must be always explicitly injected.

P.S. wiring just text as content is also almost never necessary

answered Jul 15, 2020 at 7:53

Andrea Giammarchi

3,2081 gold badge18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to wrap a string with a html tag in hyperHTML through RegEx replace

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related