使用 ReactJS 突出显示文本

Question

我试图突出显示与查询匹配的文本，但我不知道如何让标签显示为 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脚本

期望的输出： Java 脚本

原文由 Andrew Hunt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是我简单的 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> 标签突出显示。如果需要，可以简单地修改它以使用另一个标签。

更新： 为了避免唯一键丢失警告，这里有一个基于 span 和为匹配部分设置 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>;
}

原文由 peter.bartos 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

下面是一个使用标准 <mark> 标签来突出显示文本的反应组件示例：

 const Highlighted = ({text = '', highlight = ''}) => {
   if (!highlight.trim()) {
     return <span>{text}</span>
   }
   const regex = new RegExp(`(${_.escapeRegExp(highlight)})`, 'gi')
   const parts = text.split(regex)
   return (
     <span>
        {parts.filter(part => part).map((part, i) => (
            regex.test(part) ? <mark key={i}>{part}</mark> : <span key={i}>{part}</span>
        ))}
    </span>
   )
}

这里是如何使用它

<Highlighted text="the quick brown fox jumps over the lazy dog" highlight="fox"/>

原文由 Henok T 发布，翻译遵循 CC BY-SA 4.0 许可协议