使用ReactJS突出显示文本 [英] Highlight text using ReactJS

问题描述

我正在尝试突出显示与查询匹配的文字，但我无法弄清楚如何将标记显示为HTML而不是文本。

I'm trying to highlight text matching the query but I can't figure out how to get the tags to display as HTML instead of text.

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>
        );
    }
});

当前输出：< strong> Java< / strong>脚本

Current Output: <strong>Java</strong>script

所需输出： Java 脚本

推荐答案

这是我简单的twoliner助手方法：

Here is my simple twoliner helper method:

getHighlightedText(text, higlight) {
    // Split text on higlight term, include term itself into parts, ignore case
    var parts = text.split(new RegExp(`(${higlight})`, 'gi'));
    return <span>{parts.map(part => part.toLowerCase() === higlight.toLowerCase() ? <b>{part}</b> : part)}</span>;
}

它返回一个范围，其中所请求的部分高亮显示< b取代; < / b> 标签。如果需要，可以简单地修改它以使用其他标记。

It returns a span, where the requested parts are highlited with <b> </b> tags. This can be simply modified to use other tag if needed.

更新：为避免唯一键丢失警告，这里是基于跨度的解决方案并为匹配的部分设置fontWeight样式：

UPDATE: To avoid unique key missing warning, here is a solution based on spans and setting fontWeight style for matching parts:

getHighlightedText(text, higlight) {
    // Split on higlight term and include term into parts, ignore case
    let parts = text.split(new RegExp(`(${higlight})`, 'gi'));
    return <span> { parts.map((part, i) => 
        <span key={i} style={part.toLowerCase() === higlight.toLowerCase() ? { fontWeight: 'bold' } : {} }>
            { part }
        </span>)
    } </span>;
}

这篇关于使用ReactJS突出显示文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！