Highlight part of Text - html

Question

I was building project similar to Google Search using React.js and GoogleAPI.
Here I have got a problem.
For example, if you search "tea" on Google, you can see "Searches related to tea" at the bottom of the result, just above the pagination.
There, the words expect "tea" is bold.
How can I implement it using React?
I know the word "tea" and full text of related searches, but how can I highlight the part of text?
Many help.
Here is my code.
In the code, item.query is the full text such as "black tea", and searchValue is "tea". I just want to make "black" bold.
import React, { Component } from ‘react’;
import { connect } from ‘react-redux’;
class RelatedSearch extends Component {
render() {
var res = this.props.searchResults.related_searches;
return (
<div>
<br/><br/>
<p>Related Search</p>
{res.map((item, index) =>
<Item item={item} key={index} />
)}
</div>
);
}
}
function Item (item, key) {
return <div>{item.item.query}</div>;
}
const mapStateToProps = state => ({
searchResults: state.usersReducer.searchResults,
searchValue : state.usersReducer.searchValue,
});
export default connect(mapStateToProps)(RelatedSearch);
I have got answers here and already accepted it, but I received suggestion not to use dangerous html. Is there any other solution?

Answer 1

Here is what I came up with (it may not work in all edge cases but I tested it and it works in most situations)
First get a handle on the search term
let searchTerm = "Hello";
Then create a function that loops through the current string
createHighlight(text) {
// split the string at the point(s) where the search term is present.
let split = text.toLowerCase().split(searchTerm.toLowerCase());
// create a placeholder string.
let ttt = "";
// loop through the splited string and put in the search term after each one and wrap it in a span with a class 'highlight' unless it is the last one.
for (let i = 0; i < split.length; i++) {
if (i === split.length - 1) {
ttt += split[i];
} else {
ttt += `${split[i]} <span class="highlight">${searchTerm}</span>`;
}
}
//return the string as HTML.
return ttt;
}
Use it in your HTML (in place of just inserting the string)
<p dangerouslySetInnerHTML={{
__html: this.createHighlight("hello here hello is text hello")}}
/>
And remember to add a class to style the highlighted text (.highlight {bacround-color: yellow})
Here is a link to a codepen https://codesandbox.io/s/flamboyant-frost-hn47k?fontsize=14

Answer 2

Using javascript
var searchTerm = "hello";
function heighlightText() {
var ele= document.getElementById("sample");
var arrText = ele.innerHTML.split(searchTerm);
var rst = "";
for(i=0;i<arrText.length;i++) {
if(i === arrText.length - 1)
{
rst +=arrText[i];
continue;
}
rst +=arrText[i] + "<span class='highlight'>" + searchTerm +"</span>";
}
ele.innerHTML = rst;
}
heighlightText();
.highlight {
background-color : yellow;
}
<div id="sample">hello test search the things hello and then</div>

Answer 3

You can try this, see if it helps:
class App extends React.Component{
highlightText(sentence, wordToHighlight){
let highlightedText = sentence.split(" ")
.map(word => word.toUpperCase() === wordToHighlight.toUpperCase() ? `<b>${word}</b>` : word)
.join(" ");
return {__html: highlightedText};
}
render(){
return(
<div dangerouslySetInnerHTML={this.highlightText("I am a robot charlie.", "robot")} />
)
}
}
ReactDOM.render( <App />, document.getElementById('root') );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />