Reactで検索結果の強調をしたい

Question

Reactにて
メッセージを検索して、
メッセージコンポーネントにて描画するという処理を書こうとしています。

Jacascriptにて、書いてみました。検索文字queryをspanで置換するイメージです。

var after = '<span class="searchWord">' + query + '</span>';
var message = message.replace(new RegExp( query ,"g"), after );

これをReact内でthis.props.messageに同じように実装したいのですが、
どのようにすればよいでしょうか。すみませんがご教示ください。

        var Message = React.createClass({
            render: function() {
                return (
                    <li>
                        <div className="message">
                            {this.props.message}
                        </div>
                    </li>
                );
            }
        });

Answer 1

こんな感じでどうでしょうか？

var Message = React.createClass({
  render: function() {
    var index = -1;
    var query = this.props.query;
    var messages = [this.props.message];
    // indexOfで`query`を検索して、その前後を分割することを繰り返す
    while (typeof messages[messages.length - 1] === 'string' && (index = messages[messages.length - 1].indexOf(query)) !== -1) {
      var lastMessage = messages.pop();
      var before = lastMessage.slice(0, index);
      var middle = lastMessage.slice(index, index + query.length);
      var after = lastMessage.slice(index + query.length);
      if (before) messages.push(before);
      // 検索結果は仮想DOMの要素にする
      if (middle) messages.push(<span class="searchWord">{middle}</span>);
      if (after) messages.push(after);
    }
    return (
      <li>
        <div className="message">
          {messages}
        </div>
      </li>
    );
  }
});

注意する点としては、replaceは正規表現なので検索したい文字列に正規表現として意味のある文字がある場合にエスケープしなければなりません。なので、今回はindexOfを使いました。

Comments

[ricy]

ありがとうございました。
大変参考になりました、想定通りの結果になりました。
これで検索機能が実装できそうです。