如何通过 RegEx 替换在 hyperHTML 中用 html 标记包装字符串

Question

我正在构建一个搜索自动建议组件，其中使用 hyperHTML 呈现结果。 return来自服务器的建议的匹配字符串部分应突出显示。

我正在使用 RegEx 和 String.prototype.replace 来突出显示匹配部分，但不知何故我无法设法将它的 return 值输出到 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

你可以 see in this CodePen，你唯一需要做的改变就是明确要求 html:

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

{html: ...} 是最明显的方式，但是 hyperHTML 也可以将数组注入为 HTML，但这可能是意想不到的，而 lighterhtml and micro html 默认情况下更安全, 并且必须始终显式注入内插内容。

P.S。几乎不需要将文本作为内容连接

如何通过 RegEx 替换在 hyperHTML 中用 html 标记包装字符串

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

javascript

regex

hyperhtml