react+mark.js 使用输入框输入的值查询页面内容对应的文字,标红

在React和Mark.js结合使用的情况下，你可以创建一个动态标记搜索功能。首先，确保安装了`react-markdown`和`markjs`库。假设你有一个Markdown内容数组，每个元素都有一个唯一的ID，步骤如下：

1. **导入依赖**:

import React from 'react';
import Mark from 'mark.js';

2. **初始化Mark.js实例**:

const mark = new Mark();

3. **创建React组件**:

class MarkdownSearch extends React.Component {
  state = { query: '', highlightedContent: '' };

  handleInputChange = (event) => {
    this.setState({ query: event.target.value });
  }

  highlightText = (content) => {
    const regex = new RegExp(this.state.query, 'gi');
    return mark.highlight(content, regex);
  }

  render() {
    const { query, highlightedContent } = this.state;

    // 当查询发生变化时，更新高亮的内容
    return (
      <div>
        <input type="text" value={query} onChange={this.handleInputChange} />
        <pre>{highlightedContent ? highlightContent(this.props.content) : this.props.content}</pre>
      </div>
    );
  }
}

4. **在父组件中使用MarkdownSearch组件并传入Markdown数据**:

<MarkdownSearch content={yourMarkdownData} />

在这个组件中，用户可以在输入框中输入关键词，当输入发生变化时，会应用Mark.js对Markdown内容进行高亮显示。