突出顯示類型反應的搜索文本

我嘗試在輸入中突出顯示輸入內容中的文本，在這種情況下我使用了兩種方法。按我的理解，我需要回到上搜索類似這樣：<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}) 
    }

來源

2017-08-17 Palaniichuk Dmytro

請好一點解釋用例。目前，你的解釋太模糊了。「搜索」究竟意味着什麼？你想在輸入文本時輸入一個子字符串？ – Chris

@克里斯是在文本輸入 –

打字時簡單地存儲在渲染方法在變量中輸入的文本。通過單詞使用JavaScript的拆分方法，並將CSS樣式添加到地圖函數中的每個單詞。 – fungusanthrax

您所提供的代碼是太少了解你的應用程序實際上是怎麼回事。相反，我在下面做了一個簡單的例子。

在下面的代碼片段中，我首先創建一個具有固定文本和輸入元素的應用程序。輸入元素具有一個具有onChange觸發器的偵聽器。無論何時鍵入內容，都會觸發changeInput功能。

該函數首先獲取打印文本的相關DOM節點的innerText。然後它會嘗試使用indexOf找到您輸入的子字符串。如果匹配，我們將字符串分成三部分（匹配文本以及匹配文本前後的子字符串，如果有的話）。

如果沒有匹配，我們將文本重置爲初始值。

整個事情然後進入一個數組;第一和第三項是純字符串，而第二項（匹配項）是類型爲strong的React元素，用於突出顯示匹配的文本。

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，另一個持有純文本表示。

另外請注意，這隻會凸顯第一匹配的子字符串。例如，如果您有字符串：「Lorem存有，Lorem存有」，當您搜索「排版」，只有這個詞第一次出現將被突出顯示。如果你想要多個高亮，你可以嘗試使用某種正則表達式。

來源

2017-08-17 14:18:10 Chris

這確實幫助我在反應本機應用程序中實現類似的功能。謝謝 – wizloc

突出顯示類型反應的搜索文本

回答

相關問題