1. 首页
  2. 问题
  3. 使用ReactJS突出显示文本
小编典典

使用ReactJS突出显示文本

reactjs

我正在尝试突出显示与查询匹配的文本，但是我不知道如何使标记显示为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 脚本


阅读 387

收藏
2020-07-22

共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>标签突出显示。如果需要，可以简单地将其修改为使用其他标签。

更新： 为避免唯一键丢失警告，这是一个基于跨度并为匹配的零件设置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>;
}
2020-07-22