React-native中高亮文本实现方案

前言

React-native 中高亮文本实现方案，rn 中文本高亮并不像 h5 那样，匹配正则，直接添加标签实现，rn 中一般是循环实现了。一般是一段文本，拆分出关键词，然后关键词高亮。

简单实现

const markKeywords = (text, highlight) => {if (!text || !highlight) return {value: [text], highlight: []}

    for (let index = 0; index  item),
        hightList: highlight.map(item => item)
    }
} 

上面可以拆分出可以循环的文本，和要高亮的文本。

特殊情况

const title = 'haorooms 前端博文章高亮测试一下'
const highLightWords = ['前端博文', '文章高亮']

因为打上 星号 标记的原因，文章高亮 在被标记成 前端博文 章高亮 后，并不能被 文章高亮 匹配，而且即使能匹配也不能把 前端博文章高亮 拆成 前端博文 、 文章高亮 ，如果能拆成 前端博文章高亮 就好了。

function sort(letter, substr) {letter = letter.toLocaleUpperCase()
  substr = substr.toLocaleUpperCase()
  var pos = letter.indexOf(substr)
  var positions = []
  while(pos> -1) {positions.push(pos)
     pos = letter.indexOf(substr, pos + 1)
  }

  return positions.map(item => ([item, item + substr.length]))
}

// 高亮词第一次遍历索引
function format (text, hight) {var arr = []
  // hight.push(hight.reduce((prev, curr) => prev+curr), '')
  hight.forEach((item, index) => {arr.push(sort(text, item))
  })

  return arr.reduce((acc, val) => acc.concat(val), []);
}

// 合并索引区间
var merge = function(intervals) {
  const n = intervals.length;

  if (n  a[0] - b[0]);

  let refs = [];
  refs.unshift([intervals[0][0], intervals[0][1]]);

  for (let i = 1; i  a[0] - b[0]);
}

function getHightLightWord (text, hight) {var bj = merge(format(text, hight))
  const c = text.split('')
  var bjindex = 0
  try {bj.forEach((item, index) => {item.forEach((_item, _index) => {c.splice(_item + bjindex, 0, '**')
          bjindex+=1
      })
    })
  } catch (error) { }
  return c.join('').split('**')
}

export const markKeywords = (text, keyword) => {if (!text || !keyword || keyword.length === 0) {return { value: [text], keyword: []}
  }
  if (Array.isArray(keyword)) {keyword = keyword.filter(item => item)
  }
  let obj = {value: [text], keyword };
  obj = {value: getHightLightWord(text, keyword).filter((item) => item),
    keyword: keyword.map((item) => item),
  };
  return obj;
};

述方法中我们先使用了下标匹配的方式，得到一个下标值的映射，然后通过区间合并的方式把连着的词做合并处理，最后再用合并后的下标值映射去打 ** 标记即可。

简单组件封装

function TextHighLight(props) {const { title = '', highLightWords = [] } = props
    const {numberOfLines, ellipsizeMode} = props
    const {style} = props

    const {markKeywordList, hightList} = markKeywords(title, highLightWords)

    return 
            {
                markKeywordList ?
                    markKeywordList.map((item,index) => ((hightList && hightList.some(i => (i.toLocaleUpperCase().includes(item) || i.toLowerCase().includes(item))))
                            ? {item}
                            : item
                    ))
                    : null
            }
        
}