使用Javascript - 使用的onClick功能突出顯示在字符串中的特定文本

Question

所以我們可以說，我們有一些文字HTML段落：

<p>Hello. This is a random paragraph with some not so random text inside of this paragraph</p> 

而且我們有一個字符串數組：

const highlightThisWords = ['random', 'paragraph', 'inside'] 

什麼我需要的是在數組中包含的段落內部突出顯示（改變樣式）的函數。請注意，單詞段在標籤內部是兩次，但我只需要突出顯示我點擊的特定段落。另外我需要做一些計算後點擊增加一個計數器。

環境：React.js沒有jQuery的可能

Answer 1

const highlightThisWords = ['random', 'paragraph', 'inside']; 
 
const pNode = document.querySelector('p'); 
 

 
// turn pNode into a highlight-aware DOM 
 
pNode.innerHTML = pNode.textContent.split(' ').map(word => { 
 
    return highlightThisWords.includes(word) ? `<span>${word}</span>` : word; 
 
}).join(' '); 
 

 
const potentialHighlights = pNode.querySelectorAll('span'); 
 
potentialHighlights.forEach(highlightableWord => { 
 
    highlightableWord.addEventListener('click', function(e) { 
 
    // dehighlight all the rest 
 
    pNode.querySelectorAll('.highlighted').forEach(highlighted => { 
 
     highlighted.classList.remove('highlighted') 
 
    }); 
 
    // highlight the clicked word 
 
    highlightableWord.classList.add('highlighted'); 
 
    }); 
 
});

.highlighted { 
 
    color: red; 
 
}

<p>Hello. This is a random paragraph with some not so random text inside of this paragraph</p>

上面你找到一個示例代碼段香草JS，實現最小的解決你的問題。除非您將該單詞封裝在自己的html標籤中，否則沒有人確定段落中單擊哪個確切單詞的方式。到目前爲止提出的答案是將每一個單詞都包裹在標籤中。雖然這是有效的，但如果你有很長的段落（想象你的內存中有成千上萬的DOM節點只是爲了一個段落元素），它將不會很好。我的建議是僅在標籤中包裝「潛在的高亮」字樣。

Answer 2

由於使用的反應，你可以用String.prototype.split()分裂整個文本的各個單詞數組，然後使用條件的渲染，使它們所強調與否：

class MyComponent extends React.Component { 
    render() { 
    const arrayOfStrings = stringContainingParagraph.split(' '); 

    return (
     <div> 
     {arrayOfStrings.map((elem) => (
      (highlightThisWords.indexOf(elem) !== -1) ? 
      <mark>{elem}</mark> : 
      <span>{elem}</span> 
     ))} 
     </div> 
    ); 
    } 
} 

然後，您可以按照您的意願（增加一個計數器，或使用onClick s到得到您想要的功能）自定義此代碼。

Answer 3

您可以創建一個自定義組件，然後使用該自定義組件爲「」拆分單詞，但我嘗試創建一個不太乾淨的jsfiddle，但顯示了它如何工作的演示。 爲了表示對這個職位代碼：

class Hello extends React.Component { 
    constructor() { 
    super(); 
    this.handleClick = this.handleClick.bind(this); 
    } 
    split(str) { 
    return str.split(" "); 
    } 
    make(str, i) { 
    return <span key={i} style={{marginLeft:3}} onClick={this.handleClick}>{str}</span>; 
    } 
    handleClick(e) { 
    console.log(this.props.highlights, e.target.innerText); 
    if (this.props.highlights.indexOf(e.target.innerText) !== -1) { 
     e.target.style.background = "red"; 
    } 
    } 
    render() { 
    const parts = this.split(this.props.name); 
    return <div>{parts.map((d, i) => { 
     return this.make(d, i); 
    })}</div>; 
    } 
} 

ReactDOM.render(
    <Hello highlights={['random', 'paragraph', 'inside']} name="This is a random paragraph with some not so random text inside of this paragraph" />, 
    document.getElementById('container') 
);