搜索飘黄

效果

<Highlight  content={desc}    highlightPos={descriptionPos} />

<Highlight
    content={patientAnalysis}
    highlightPos={patientAnalysisPos}
>
      <Text>患者术前诊断报告：</Text>
 </Highlight>

1、handlePosition方法

根据后端返回的utf-8飘黄位置，转换为JS中飘黄的位置

export default function handlePosition (content, contentPos) {
    const numberPostions = positionSort(contentPos);
    const realLocation = getLocation(numberPostions, content);
    let handledPosition = [];
    realLocation.forEach((item, index, arr) => {
        if (index < arr.length - 1) {
            handledPosition.push([item, arr[index + 1]]);
        };
    })
    console.log('handledPostion', handledPostion);
    return handledPosition;
}

returns: 处理后为数字格式、升序的飘黄坐标数组

function positionSort (arr) {
    let newArr = [];
    arr.forEach(item => {
        item.split(':').forEach(item => {
            newArr.push(Number(item));
        });
    });
    return quickSort(newArr);
}

UTF-8转换成JS中飘黄位置

function getLocation(utfLocationArr, str) {
    let utfLength = 0;
    let unicodeLocationArr = [];
    for (let i = 0; i <= str.length; i++) {
        let unicode = str.charCodeAt(i);
        utfLocationArr.forEach(item => {
            if (item === utfLength) {
                unicodeLocationArr.push(i);
            };
        });
        utfLength += getBytes(unicode);
    };
    return unicodeLocationArr;
};

获取unicode字符所相应的utf-8的字节数

function getBytes (unicode) {
    switch (true){
        case (0 <= unicode && unicode <= 127):
            return 1;
        case (128 <= unicode && unicode <= 2047):
            return 2;
        case (2048 <= unicode && unicode <= 65535):
            return 3;
        case (65536 <= unicode && unicode <= 2097151):
            return 4;
        case (2097152 <= unicode && unicode <= 67108863):
            return 5;
        default:
            return 6;
    }
}

function quickSort(arr) {
    if (arr.length < 1) {
        return arr;
    };
    var pivotIndex = Math.floor(arr.length / 2);
    var pivot = arr.splice(pivotIndex, 1)[0];
    var left = [];
    var right = [];
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] < pivot) {
            left.push(arr[i]);
        } else {
            right.push(arr[i]);
        };
    };
    return quickSort(left).concat([pivot], quickSort(right));
}

1、hightLight组件

/**
 * @description: 1、按位置飘黄; 2、按文字飘黄; 3、不飘黄原路返回
 * 当有children时，单行显示超出部分省略号显示，需额外再要给该组件传入'cross-single-line'类名，
 * 两行显示超出部分省略号显示需传入'two-line'类
 */
export default function Highlight (props: HighlightParams) {
    const {content, highlightPos = [], children, highlightWords, type,
    doHighLight = true} = props;
    let Comp = null;
    let handledContent = null;
    // 1、按位置飘黄;
    if (highlightPos.length >= 1 && doHighLight) {
        const handledPostion = handlePosition(content, highlightPos);
        handledContent = handledContentFn(type, content);
        const contentStart = handledContent.slice(0, handledPostion[0][0]);
        const contentEnd = handledContent.slice(handledPostion[handledPostion.length - 1][1]);

        Comp = (
            <View className={props.className}>
                {children}
                <Text>{contentStart}</Text>
                {handledPostion.map((item, index) => {
                    return (
                        <View className='highlight-container'>
                            {
                                index % 2 === 0 ? ( <View className='highlight'>{handledContent.slice(item[0], item[1])}</View> ) : (<Text>{handledContent.slice(item[0], item[1])}</Text>)
                            }
                        </View>
                    )
                })}
                <Text>{contentEnd}</Text>
            </View>
        );
    } 
    else {
    // 2、按文字飘黄;
        if (highlightWords) {
            const arr = content.split(highlightWords);
            Comp = (
                <View className={`highlight-container ${props.className}`}>
                    {arr.map((item, index) => {
                        return index !== 0 ? (<View className='highlight-wrap'>
                            <Text className='highlight'>{highlightWords}</Text>
                            <Text>{item}</Text>
                        </View>)
                        : (<Text>{item}</Text>)
                    })}
                </View>
            );
        } 
    // 3、不飘黄原路返回
        else {
            handledContent = handledContentFn(type, content);
            Comp =  (
                <View className={`highlight-container ${props.className}`}>
                    {children}
                    <Text>{handledContent}</Text>
                </View>
            );
        };
    };
    return Comp;
};

/**
 * @description: 当为医生tab时，content需要处理，分隔符为顿号
 */
function handledContentFn (type, content) {
    let handledContent = '';
    switch (type) {
        case 'doctor':
            handledContent = content.replace(/,/g,'、');
            break;
        default:
            handledContent = content;
            break;
    }
    return handledContent
}