我正在尝试突出显示与查询匹配的文本,但是我不知道如何使标记显示为HTML而不是文本。
var Component = React.createClass({ _highlightQuery: function(name, query) { var regex = new RegExp("(" + query + ")", "gi"); return name.replace(regex, "<strong>$1</strong>"); }, render: function() { var name = "Javascript"; var query = "java" return ( <div> <input type="checkbox" /> {this._highlightQuery(name, query)} </div> ); } });
当前输出: Java strong>脚本
所需的输出: Java 脚本
这是我简单的twoliner辅助方法:
getHighlightedText(text, highlight) { // Split text on highlight term, include term itself into parts, ignore case const parts = text.split(new RegExp(`(${highlight})`, 'gi')); return <span>{parts.map(part => part.toLowerCase() === highlight.toLowerCase() ? <b>{part}</b> : part)}</span>; }
它返回一个跨度,其中所请求的零件以<b> </b>标签突出显示。如果需要,可以简单地将其修改为使用其他标签。
<b> </b>
更新: 为避免唯一键丢失警告,这是一个基于跨度并为匹配的零件设置fontWeight样式的解决方案:
getHighlightedText(text, highlight) { // Split on highlight term and include term into parts, ignore case const parts = text.split(new RegExp(`(${highlight})`, 'gi')); return <span> { parts.map((part, i) => <span key={i} style={part.toLowerCase() === highlight.toLowerCase() ? { fontWeight: 'bold' } : {} }> { part } </span>) } </span>; }