タイプでテキストを強調表示すると反応する

Question

入力時に入力時にテキストを強調表示しようとしますが、この場合は2つの方法を使用します。私は検索に戻る必要がある。このような何かを理解したよう：<mark>${item}<mark/>

fuzzyContains = (text, search) => { 
     debugger 
     if (!text) 
      return false 
     if (!search) 
      return true 

     search = search.toLowerCase() 
     text = text.toString().toLowerCase() 

     let previousLetterPosition = -1 

     return search.split('').every(s => { 
      debugger 
      previousLetterPosition = text.indexOf(s, previousLetterPosition + 1) 

      return previousLetterPosition !== -1 
     }) 
    } 

    handleSearch = search => { 
     const {data} = this.state 
     debugger 
     let filteredData = data.filter(x => Object.keys(x).some(key => { 
      debugger 
      this.fuzzyContains(x[`<mark>${key}<mark/>`], search)})) 

     this.setState({filteredData, search}) 
    } 

Answer 1

をあなたが提供するコードは、実際にあなたのアプリで何が起こっているか理解することは少なすぎます。代わりに、私は以下の簡単な例を作りました。

---

次のスニペットでは、固定テキストと入力要素でアプリケーションを作成します。入力要素には、onChangeトリガーを持つリスナーがあります。何かを入力するたびに、changeInput関数が起動されます。

この関数は、テキストが印刷される関連DOMノードのinnerTextを取得することから始まります。次に、入力した部分文字列をindexOfで検索します。一致するものがあれば、その文字列を3つの部分に分割します（一致するテキストと一致するテキストの前後にある部分文字列）。

一致するものがなければ、テキストを初期値に戻します。

全体が配列に入力されます。第1および第3のアイテムは平文であり、第2のアイテム（一致）は一致するテキストを強調表示するために使用されるタイプstrongの反応エレメントである。

class MyApp extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.initialText = "Lorem ipsum dolor sit amet"; 
 
    this.state = { 
 
     text: this.initialText, 
 
     inputValue: "" 
 
    }; 
 
    } 
 
    changeInput = (e) => { 
 
    let value = e.target.value; 
 
    let txt = document.getElementById("myText").innerText; 
 
    let idx = txt.indexOf(value); 
 
    if(idx >= 0) { 
 
     let newText = [txt.substring(0, idx), <strong>{txt.substring(idx, idx + value.length)}</strong>, txt.substring(idx + value.length)]; 
 
     this.setState({inputValue: value, text: newText}); 
 
    } else { 
 
     this.setState({inputValue: value, text: this.initialText}); 
 
    }  
 
    } 
 
    render() { 
 
    return (
 
     <div> 
 
     <p id="myText">{this.state.text}</p> 
 
     <input onChange={this.changeInput} value={this.state.inputValue} /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<MyApp />, document.getElementById("app"));

strong { 
 
    background: red; 
 
    color: white; 
 
    font-weight: inherit; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

---

ご希望の場合は、これはrefsを使用して行うことができることに注意してください。 DOMルックアップとrefsの使用を避けたい場合は、常に2つの状態変数を使用できます。結果として得られるJSXを保持するものと、プレーンテキスト表現を保持するJSX

また、最初のの部分文字列が強調表示されます。たとえば、文字列が"Lorem ipsum、Lorem ipsum"で、"Lorem"を検索した場合、その単語の最初の文字のみが強調表示されます。複数のハイライトが必要な場合は、ある種の正規表現を試してみることができます。