本文介绍了使用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突出显示文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!