html - 突出显示部分文本

Question

我正在使用 React.js 和 GoogleAPI 构建类似于 Google 搜索的元素。在这里我遇到了问题。例如，如果您在 Google 上搜索“茶”，您会在结果底部看到“与茶相关的搜索”，就在分页上方。在那里，期望“茶”这个词是粗体的。我如何使用 React 实现它？

我知道“茶”这个词和相关搜索的全文，但是如何突出显示部分文本？很多帮助。

这是我的代码。代码中item.query为“black tea”等全文，searchValue为“tea”。我只想把“黑色”加粗。

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);

我在这里得到了答案并且已经接受了，但是我收到了不要使用危险的 html 的建议。还有其他解决办法吗？

Answer 1

这是我想出的(它可能不适用于所有边缘情况，但我测试了它并且它在大多数情况下都有效)

首先掌握搜索词

let searchTerm = "Hello";

然后创建一个循环遍历当前字符串的函数

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;
}

在您的 HTML 中使用它(而不是仅仅插入字符串)

 <p dangerouslySetInnerHTML={{
     __html: this.createHighlight("hello here hello is text hello")}}
  />

并记得添加一个类来设置突出显示文本的样式 (.highlight {bacround-color: yellow})

这是代码笔的链接 https://codesandbox.io/s/flamboyant-frost-hn47k?fontsize=14