使用 ReactJS 突出显示文本

发布于04月05日

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

当前输出:&lt；strong&gt；Java &lt/strong&gt； playbook

所需输出:Javascript

推荐答案

下面是我的简单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>个标记高亮显示.如果需要，可以简单地修改它以使用另一个标记.

UPDATE:为避免出现唯一的键缺失警告，以下是一个基于跨度和设置匹配零件的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>;
}