react-highlight-words源码解析

xiangzhihong 发布于2019-08-22 15:08 / 1868人阅读

摘要：被和模块共享的工具函数源码思路主要提供多个工具函数此为核心函数，根据传入的参数，返回这样的数据结构，分段标识出语句的高亮部分及未高亮部分。供给外部进一步使用。

react-highlight-words

https://github.com/bvaughn/re...

一个React组件，用处：在一段文本中高亮展示某些单词

源码思路

直接返回一个函数式组件

最重要是调用findAll函数，返回[{start: startIndex, end: endIndex, highlight: boolean}, {同样的结构}]，将一段句子合理的划分为从前到后的高亮部分和未高亮部分

然后遍历chunks，返回高亮和未高亮两种不同的DOM结构

==核心就是将高亮部分和未高亮部分通过数据结构（对象数组）进行标识和区分，便于后续的处理==

findAll函数是highlight-words-core模块提供的工具方法，所有后面会讲解这个模块。

/* @flow */
import { findAll } from "highlight-words-core"
import PropTypes from "prop-types"
import React from "react"

Highlighter.propTypes = {
  activeClassName: PropTypes.string,
  activeIndex: PropTypes.number,
  activeStyle: PropTypes.object,
  autoEscape: PropTypes.bool,
  className: PropTypes.string,
  findChunks: PropTypes.func,
  highlightClassName: PropTypes.string,
  highlightStyle: PropTypes.object,
  highlightTag: PropTypes.oneOfType([
    PropTypes.node,
    PropTypes.func,
    PropTypes.string
  ]),
  sanitize: PropTypes.func,
  searchWords: PropTypes.arrayOf(PropTypes.string).isRequired,
  textToHighlight: PropTypes.string.isRequired,
  unhighlightClassName: PropTypes.string,
  unhighlightStyle: PropTypes.object
}

/**
 * Highlights all occurrences of search terms (searchText) within a string (textToHighlight).
 * This function returns an array of strings and s (wrapping highlighted words).
 */
export default function Highlighter ({
  activeClassName = "",
  activeIndex = -1,
  activeStyle,
  autoEscape,
  caseSensitive = false,
  className,
  findChunks,
  highlightClassName = "",
  highlightStyle = {},
  highlightTag = "mark",
  sanitize,
  searchWords,
  textToHighlight,
  unhighlightClassName = "",
  unhighlightStyle
}) {
  const chunks = findAll({
    autoEscape,
    caseSensitive,
    findChunks,
    sanitize,
    searchWords,
    textToHighlight
  })
  const HighlightTag = highlightTag
  let highlightCount = -1
  let highlightClassNames = ""
  let highlightStyles

  return (
    
      {chunks.map((chunk, index) => {
        const text = textToHighlight.substr(chunk.start, chunk.end - chunk.start)

        if (chunk.highlight) {
          highlightCount++

          const isActive = highlightCount === +activeIndex

          highlightClassNames = `${highlightClassName} ${isActive ? activeClassName : ""}`
          highlightStyles = isActive === true && activeStyle != null
            ? Object.assign({}, highlightStyle, activeStyle)
            : highlightStyle

          return (
            
              {text}
            
          )
        } else {
          return (
            
              {text}
            
          )
        }
      })}
    
  )
}

highlight-words-core

https://github.com/bvaughn/hi...

被react-highlight-words和react-native-highlight-words模块共享的工具函数

源码思路

主要提供多个工具函数

findAll

此为核心函数，根据传入的参数，返回[{start, end, highlight}]这样的数据结构，分段标识出textToHighlight语句的高亮部分及未高亮部分。供给外部进一步使用。

combineChunks

将defaultFindChunks函数返回的chunks进行合并处理，把有重叠的块合并为一个块（若不合并，后续处理则会出现重复文字，与原文内容都不一致了）

defaultFindChunks

通过正则匹配查找searchWords, 返回[{start, end}, {}] 这样的数据结构

fillInChunks

该函数接收chunksToHighlight，只包含高亮的部分，需要填充出未高亮的部分，才是完整表达出textToHighlight，同时更改了数据结构，变成 [{start, end, highlight}], 多出highlight

findAll -》 fillInChunks -》combineChunks -》defaultFindChunks

箭头表示依赖关系，思路上也是层层递进，有顺序的。

GPU云服务器云服务器源码解析 webrtc源码解析 webrtc 源码解析 html 解析源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93197.html

Flink Metrics 源码解析

摘要：有如下模块源码解析源码解析源码解析源码解析源码解析源码解析源码解析源码解析源码解析使用和监控和博客从到学习介绍从到学习上搭建环境并构建运行简单程序入门从到学习配置文件详解从到学习介绍从到学习如何自 Flink Metrics 有如下模块： Flink Metrics 源码解析 —— Flink-metrics-core Flink Metrics 源码解析 —— Flink-metr...

sshe 2019-08-19 10:30 评论0 收藏0
Flink 源码解析 —— 深度解析 Flink Checkpoint 机制

摘要：机制博客从到学习介绍从到学习上搭建环境并构建运行简单程序入门从到学习配置文件详解从到学习介绍从到学习如何自定义从到学习介绍从到学习如何自定义从到学习转换从到学习介绍中的从到学习中的几种详解从到学习读取数据写入到从到学习项目如何运行从 Flink Checkpoint 机制 https://t.zsxq.com/ynQNbeM 博客 1、Flink 从0到1学习 —— Apache Fl...

0x584a 2019-08-19 10:26 评论0 收藏0
Flink 源码解析 —— 深度解析 Flink 序列化机制

摘要：序列化机制博客从到学习介绍从到学习上搭建环境并构建运行简单程序入门从到学习配置文件详解从到学习介绍从到学习如何自定义从到学习介绍从到学习如何自定义从到学习转换从到学习介绍中的从到学习中的几种详解从到学习读取数据写入到从到学习项目如何 Flink 序列化机制 https://t.zsxq.com/JaQfeMf 博客 1、Flink 从0到1学习 —— Apache Flink 介绍 2...

y1chuan 2019-08-19 10:30 评论0 收藏0
Flink Clients 源码解析

摘要：模块中的类结构如下博客从到学习介绍从到学习上搭建环境并构建运行简单程序入门从到学习配置文件详解从到学习介绍从到学习如何自定义从到学习介绍从到学习如何自定义从到学习转换从到学习介绍中的从到学习中的几种详解从到学习读取数据写入到从到学 Flink-Client 模块中的类结构如下： https://t.zsxq.com/IMzNZjY showImg(https://segmentfau...

xiao7cn 2019-08-19 10:27 评论0 收藏0
Flink Annotations 源码解析

摘要：模块中的类结构如下博客从到学习介绍从到学习上搭建环境并构建运行简单程序入门从到学习配置文件详解从到学习介绍从到学习如何自定义从到学习介绍从到学习如何自定义从到学习转换从到学习介绍中的从到学习中的几种详解从到学习读取数据写入到从到学 Flink-Annotations 模块中的类结构如下： https://t.zsxq.com/f6eAu3J showImg(https://segme...

Eirunye 2019-08-19 10:26 评论0 收藏0