react实现HTML文档搜索

还在下雨吗

已于 2022-09-07 17:11:55 修改

阅读量334

点赞数

分类专栏： react 文章标签： html react.js 前端

于 2022-09-07 15:54:56 首次发布

本文链接：https://blog.csdn.net/qq_43159578/article/details/126747426

版权

react 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1 搜索按钮

       <div style={{marginBottom: 10}}>
              <Form layout='inline' ref={this.formRef} name="search">
                    <Row gutter={24}>
                                    <Form.Item name="search"
                                    >
                                        {getFieldDecorator("search")(<Input  />)}
                                    </Form.Item>
                                    <Form.Item name="search"
                                    >
                                        <Input style={{width:'70px'}} disabled={true}
                                            value={searchInputValue}
                                        />
                                    </Form.Item>

                                    <Button type="primary" icon='search' onClick={this.onTextSearch}>搜索</Button>&emsp;
                                 
                                </Row>
                 </Form>
          </div>

2 CSS样式

.result{
    background: #77ff45;
}
.res
{
    color: #fbff61;
    background: #ff013e;
}

3 搜索方法

    onTextSearch = () => {
        $(".result").removeClass("res");//去除原本的res样式
        let searchText = this.props.form.getFieldsValue()
        var key = searchText.search; //取key值
        if (!key) {//key为空
            $(".result").removeClass("result");//去除原本的res样式
            this.state.oldKey = "";
            this.setState({
                searchInputValue: '',
            });
            return; //key为空则退出
        }
        if (this.state.oldKey != key) {
            $(".result").removeClass("result");//去除原本的res样式
            let pos = new Array();
            var regExp = new RegExp(key+'(?!([^<]+)?>)', 'ig');//正则表达式匹配
            // 高亮操作
            $("#filelog-container div")[0].innerHTML = $("#filelog-container div")[0].innerHTML.replace(regExp, "<span   class=\"result\" >" + key + "</span>");
            $(".result").each(function () {//获取所有匹配值位置
                pos.push(this.offsetTop);
            });
            this.state.oldKey = key;
            this.state.pos = pos;
            this.state.index = 0;
            this.state.oldCount = $(".result").length;

        }else {
            if(this.state.oldCount!=0){
                this.state.index++;
                if(this.state.index==this.state.oldCount){
                    this.state.index = 0 ;
                }
            }
        }
        this.setState({
            searchInputValue: this.state.oldCount==0?this.state.index+"/"+this.state.oldCount:this.state.index+1+"/"+this.state.oldCount,
        });
        $(".result:eq(" + this.state.index + ")").addClass("res");//当前位置关键词改为红色字体
        $("#filelog-container").scrollTop( this.state.pos[ this.state.index] - 200);//跳转到指定位置
    }