Как обернуть строку тегом html в гипер HTML с помощью RegEx replace

Question

Я создаю компонент автоматического предложения поиска, в котором результаты отображаются с гипер HTML. Соответствующая строковая часть предложений, возвращаемых сервером, должна быть выделена.

Я использую RegEx и String.prototype.replace, чтобы выделить совпадающую часть, но почему-то мне не удается вывести возвращаемое значение это на HTML. Он просто отображает теги <strong> в виде строк.

Я пробовал несколько разных подходов, чтобы решить эту проблему, но безуспешно, и у меня заканчиваются идеи ...

Это мой функция рендеринга:

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>

Answer 1

Как вы можете видеть в этом CodePen , единственное изменение, которое вам нужно, - это явно запрашивать html:

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

{html: ...} - наиболее очевидный способ, но hyperHTML также внедряет массивы как HTML, но это может быть неожиданно, в то время как lighter html и micro html более безопасны по умолчанию, а интерполированное содержимое должно всегда явно вводиться.

PS подключение только текста в качестве содержимого также почти никогда не требуется