react-highlight-words源碼解析

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

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

react-highlight-words

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

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

源碼思路

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

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

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

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

findAll函數(shù)是highlight-words-core模塊提供的工具方法，所有后面會(huì)講解這個(gè)模塊。

/* @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ù)

源碼思路

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

findAll

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

combineChunks

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

defaultFindChunks

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

fillInChunks

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

findAll -》 fillInChunks -》combineChunks -》defaultFindChunks

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93197.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

xiangzhihong

男|高級(jí)講師

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

TA的文章

OAuth 2.1 帶來(lái)了哪些變化

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

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

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

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

閱讀 1884·2021-08-16 11:00
你可能不了解的動(dòng)畫(huà)神器之requestAnimationFrame及其兼容寫(xiě)法

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

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

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

react-highlight-words源碼解析

相關(guān)文章

Flink Metrics 源碼解析

Flink 源碼解析 —— 深度解析 Flink Checkpoint 機(jī)制

Flink 源碼解析 —— 深度解析 Flink 序列化機(jī)制

Flink Clients 源碼解析

Flink Annotations 源碼解析

發(fā)表評(píng)論

0條評(píng)論

xiangzhihong

男|高級(jí)講師

TA的文章

OAuth 2.1 帶來(lái)了哪些變化

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

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

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

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

你可能不了解的動(dòng)畫(huà)神器之requestAnimationFrame及其兼容寫(xiě)法

我的CSS Flex印象

盒子模型的理解

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

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

react-highlight-words源碼解析

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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