react-highlight-words源碼解析

xiangzhihong 發布于2019-08-22 15:08 / 1930人閱讀

摘要：被和模塊共享的工具函數源碼思路主要提供多個工具函數此為核心函數，根據傳入的參數，返回這樣的數據結構，分段標識出語句的高亮部分及未高亮部分。供給外部進一步使用。

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 解析源碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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