反应:高亮显示两个索引之间的文本 [英] React: Highlight text between two indexes

问题描述

因此，对于每个预测，Google Places自动完成API也会为每个预测返回匹配的子字符串.

So for every prediction the google places autocomplete API also returns matched substrings for each one.

输入:San 68

预测:旧金山68

匹配的子字符串: [{偏移量:0，长度:3}，{偏移量:15，长度:2}]

期望: San 旧金山 68

我的目标是使用匹配的子字符串突出显示预测的各个部分.现在有一些挑战.我可以使用 replace 函数，并用< b> str</b> 替换每个子字符串，但是它将返回一个字符串，这意味着除非我使用 dangerouslySetInnerHTML 此方法无效.

My goal is to highlight parts of the prediction using the matched substrings. Now there is a few challenges. I could use the replace function and replace every substring with <b>str</b>, but it returns a string which means unless I use dangerouslySetInnerHTML this method doesn't work.

我也不认为有一种方法可以替换多个子字符串.我尝试使用 reduce 函数，但是在第一个循环之后，由于索引错误，它将无法真正工作.

I also don't think there is a way to replace multiple substrings. I tried to use the reduce function but after the first loop it wouldn't really work because the indexes would be wrong.

const highlight = (text, matched_substrings) => {
  return matched_substrings.reduce((acc, cur) => {
    return acc.replace(
      acc.substring(cur.offset, cur.length),
      (str) => `<b>${str}</b>`
    )
  }, text)
}

有没有办法做到这一点?我认为React使这变得更加复杂.

So is there a way to do this? I think React makes this more complicated.

推荐答案

可能不是最好的解决方案，但绝对可以解决这个问题:)前提条件是，match_substrigs数组必须按偏移量排序

probably not best solution, but definitely working one :) Prerequisite is, that matched_substrigs array has to be sorted, by offsets

export const highlightText = (text, matched_substring, start, end) => {
    const highlightTextStart = matched_substring.offset;
    const highlightTextEnd = highlightTextStart + matched_substring.length;

    // The part before matched text
    const beforeText = text.slice(start, highlightTextStart);

    // Matched text
    const highlightedText = text.slice(highlightTextStart, highlightTextEnd);

    // Part after matched text
    // Till the end of text, or till next matched text
    const afterText = text.slice(highlightTextEnd, end || text.length);

    // Return in array of JSX elements
    return [beforeText, <strong>{highlightedText}</strong>, afterText];
};

export const highlight = (text, matched_substrings) => {
    const returnText = [];

    // Just iterate through all matches
    for (let i = 0; i < matched_substrings.length; i++) {
        const startOfNext = matched_substrings[i + 1]?.offset;
        if (i === 0) { // If its first match, we start from first character => start at index 0
            returnText.push(highlightText(text, matched_substrings[i], 0, startOfNext))
        } else { // If its not first match, we start from match.offset 
            returnText.push(highlightText(text, matched_substrings[i], matched_substrings[i].offset, startOfNext))
        }
    }

    return returnText.map((text, i) => <React.Fragment key={i}>{text}</React.Fragment>)
};

这篇关于反应:高亮显示两个索引之间的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！