react-highlight-words源碼解析

xiangzhihong 發(fā)布于2019-08-22 15:08 / 1920人閱讀

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

react-highlight-words

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

一個React組件，用處：在一段文本中高亮展示某些單詞

源碼思路

直接返回一個函數(shù)式組件

最重要是調(diào)用findAll函數(shù)，返回[{start: startIndex, end: endIndex, highlight: boolean}, {同樣的結(jié)構(gòu)}]，將一段句子合理的劃分為從前到后的高亮部分和未高亮部分

然后遍歷chunks，返回高亮和未高亮兩種不同的DOM結(jié)構(gòu)

==核心就是將高亮部分和未高亮部分通過數(shù)據(jù)結(jié)構(gòu)（對象數(shù)組）進行標(biāo)識和區(qū)分，便于后續(xù)的處理==

findAll函數(shù)是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模塊共享的工具函數(shù)

源碼思路

主要提供多個工具函數(shù)

findAll

此為核心函數(shù)，根據(jù)傳入的參數(shù)，返回[{start, end, highlight}]這樣的數(shù)據(jù)結(jié)構(gòu)，分段標(biāo)識出textToHighlight語句的高亮部分及未高亮部分。供給外部進一步使用。

combineChunks

將defaultFindChunks函數(shù)返回的chunks進行合并處理，把有重疊的塊合并為一個塊（若不合并，后續(xù)處理則會出現(xiàn)重復(fù)文字，與原文內(nèi)容都不一致了）

defaultFindChunks

通過正則匹配查找searchWords, 返回[{start, end}, {}] 這樣的數(shù)據(jù)結(jié)構(gòu)

fillInChunks

該函數(shù)接收chunksToHighlight，只包含高亮的部分，需要填充出未高亮的部分，才是完整表達出textToHighlight，同時更改了數(shù)據(jù)結(jié)構(gòu)，變成 [{start, end, highlight}], 多出highlight

findAll -》 fillInChunks -》combineChunks -》defaultFindChunks

箭頭表示依賴關(guān)系，思路上也是層層遞進，有順序的。

GPU云服務(wù)器云服務(wù)器源碼解析 webrtc源碼解析 webrtc 源碼解析 html 解析源碼

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/93197.html

發(fā)表評論

登陸后可評論

0條評論

xiangzhihong

男|高級講師

我要關(guān)注我要私信

TA的文章

OAuth 2.1 帶來了哪些變化

閱讀 2789·2021-11-24 09:39
JDK,JRE,JVM三者間的關(guān)系，以及JDK、JRE的主要結(jié)構(gòu)

閱讀 2548·2021-11-23 09:51
PerfDog性能狗上手體驗及總結(jié)分析

閱讀 1802·2021-11-17 09:33
HostXen雙十一充300送50元/充500送100元/充1000元全場9折,香港2G內(nèi)存VPS月

閱讀 1737·2021-10-22 09:54
搬瓦工VPS：高端線路，助力企業(yè)運營，10Gbps美國 cn2 gia，1Gbps香港cn2 gia

閱讀 1871·2021-08-16 11:00
你可能不了解的動畫神器之requestAnimationFrame及其兼容寫法

閱讀 3421·2019-08-30 15:53
我的CSS Flex印象

閱讀 1733·2019-08-30 13:19
盒子模型的理解

閱讀 2902·2019-08-30 12:49

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

react-highlight-words源碼解析

相關(guān)文章

Flink Metrics 源碼解析

Flink 源碼解析 —— 深度解析 Flink Checkpoint 機制

Flink 源碼解析 —— 深度解析 Flink 序列化機制

Flink Clients 源碼解析

Flink Annotations 源碼解析

發(fā)表評論

0條評論

xiangzhihong

男|高級講師

TA的文章

OAuth 2.1 帶來了哪些變化

JDK,JRE,JVM三者間的關(guān)系，以及JDK、JRE的主要結(jié)構(gòu)

PerfDog性能狗上手體驗及總結(jié)分析

HostXen雙十一充300送50元/充500送100元/充1000元全場9折,香港2G內(nèi)存VPS月

搬瓦工VPS：高端線路，助力企業(yè)運營，10Gbps美國 cn2 gia，1Gbps香港cn2 gia

你可能不了解的動畫神器之requestAnimationFrame及其兼容寫法

我的CSS Flex印象

盒子模型的理解

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

react-highlight-words源碼解析

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！