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

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

我正在使用正则表达式和

String.prototype.replace

来突出显示匹配的部分，但不知何故，我无法将其返回值输出到HTML。它只是将

标记呈现为字符串

我尝试了很多不同的方法来解决这个问题，但是没有任何成功，我的想法也没有了

这是我的渲染功能：

const suggestioncontainer=document.querySelector(
“.js建议容器”
);
常数建议=[{
标题：“lorem ipsum dolor sit amet”，
网址：“#”
},
{
标题：“lorem ipsum dolor sit amet”，
网址：“#”
}
];
让query=“ipsum”；
功能呈现建议（建议、查询）{
const queryRegEx=newregexp（查询，“gi”）；
bind（suggestionsContainer）`
${suggestions.map（（suggestion）=>hyperHTML.wire（suggestion）`
`)}
`;
}
渲染建议（建议、查询）
a{
显示：块；
保证金：1rem 0；
}

尽可能地，您需要的唯一更改是明确要求
html
：

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

${suggestions.map（（suggestion）=>hyperHTML.wire（suggestion）`
`)}

{html:…}
是最明显的方法，但是
hyperHTML
也将数组作为html注入，但这可能是意外的，而默认情况下两者都比较安全，并且插入的内容必须始终显式注入

注意：将文本作为内容进行连接几乎是不必要的
您确定需要将标签作为
而不是
放置吗？而且我建议你做点像。。。因为b标签应该作为最后的手段。@case不敏感是的，你是对的。我想用
而不是
。我编辑了这篇文章来纠正它。但这并没有改变主要问题，即标记不是以html形式呈现，而是以字符串形式呈现，而不管我使用的是哪种html标记。我猜
a
元素的创建是正确的，所以问题就在它里面。您是否尝试过让它更简单，将
${wire（）`${suggestion.title.replace（queryRegEx，$&'）}
替换为
${suggestion.title.replace（queryRegEx，$&'）}
？@case不敏感是的，也尝试过。没什么区别。我用一个可运行的代码片段替换了原始问题中的代码示例，以使其更易于理解/再现。