我正在构建一个搜索自动建议组件,其中结果用 hyperHTML 呈现。
从服务器返回的建议的匹配字符串部分应突出显示。
我正在使用 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>
最佳答案
尽你所能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 注入(inject),但这可能是出乎意料的,而 lighterhtml和 micro html默认情况下更安全,并且必须始终显式注入(inject)内插内容。附言仅将文本作为内容连接也几乎不需要
关于javascript - 如何通过正则表达式替换在 hyperHTML 中用 html 标签包装字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62900040/