使用ReactJs

Question

我查看了有类似问题的不同来源，到目前为止我得到了这个：

var Component = React.createClass({
  render(results,values) {
   var regex = new RegExp("(" + values + ")", "gi");
   var name = this.props.name;
   return (
       <div style={myCssStyle}>{name.replace(regex, "<em>$1</em>")}</div>
  );
 });
});

所以现在如果我搜索＆＃34; la＆＃34;在列表中并考虑到它有多个匹配，其中一个是：＆＃34; last＆＃34;，它输出：

<em>la</em>st

如何以粗体或斜体显示名称，而不是＆＃34; <em>＆＃34;在lits。

UPDATE ::::::

我根据ScottWe的建议更新了我的代码，它适用于没有找到重复字母的情况，例如：当我搜索＆＃34; o＆＃34;时，它给出了：

这些词是：颜色和 onRowClick

预期o / p：

c o lor - ＆gt;搜索＆＃39; o＆＃39;在列表中

c 舔 - ＆gt;搜索＆＃39; c＆＃39;在列表中

我不一定要突出其他的＆＃39; o＆＃39;或者＆＃39; c＆＃39;在上面的话。？

希望这会有所帮助!!!

谢谢！

Answer 1

你可以尝试这样的事情，

var regex = new RegExp("(" + values + ")", "gi");
var match = name.match(regex)

if (match != null) {
    var parts = name.split(match[0], 2)

    return (
        <div style={myCssStyle}>{parts[0]}<em>{match[0]}</em>{parts[1]} />
    );
}
else {
    return (
        <div style={myCssStyle}>{name}</div>
    );
}

首先，这将找到字符串中的所有匹配项作为数组。当正则表达式匹配失败时，它将返回null。如果变量不为null，您将知道至少有一个匹配，并且该数组的第一个索引是第一个匹配。从那里你可以拆分字符串，并构建你想要的显示。否则，它将只打印带有原始名称的div。我希望有效。