文字高亮 render

.vue

// 返回位置

function customPosition(value = '', key = '', length = 0) {
    if (value.length === 0 || key.length === 0) {
        return []
    }
    const index = value.indexOf(key)
    if (index > -1) {
        return [index + length].concat(customPosition(value.substr(index + key.length), key, length + index + key.length))
    }
    return []
}

function customDom(h, { value = '', keyword = '' }) {
    if (value === '') {
        return h('div', {}, [h('span', {}, '')])
    }
    if (keyword === '') {
        return h('div', {}, [h('span', {}, value)])
    }
    const positionArr = customPosition(value, keyword);
    const arrDom = [];
    if (positionArr.length > 0) {
        let length = 0;
        positionArr.forEach(key => {
            arrDom.push(h('span', {}, value.substring(length, key)))
            arrDom.push(h('span', { staticClass: 'custom-keyword' }, value.substring(key, key + keyword.length)))
            length = key + keyword.length;
        })
        arrDom.push(h('span', {}, value.substring(length)))
    } else {
        arrDom.push(h('span', {}, value))
    }
    return h('div', {}, arrDom)
}

export default {
    name: 'JsonExpand',
    functional: true,
    props: {
        value: {
            type: String,
            default: ''
        },
        keyword: {
            type: String,
            default: ''
        }
    },
    render: (h, ctx) => {
        const value = ctx.props.value;
        const keyword = ctx.props.keyword;
        return customDom(h, { value, keyword })
    }
};

// 根据关键词拆分

function customDom(h, { value = '', keyword = '' }) {
    if (value === '') {
        return h('div', {}, [h('span', {}, '')])
    }
    if (keyword === '') {
        return h('div', {}, [h('span', {}, value)])
    }
    const valueArr = value.split(keyword);
    const arrDom = [];
    valueArr.forEach(item => {
        if (item !== '') {
            arrDom.push(h('span', { staticClass: 'custom-normal' }, item))
            arrDom.push(h('span', { staticClass: 'custom-keyword' }, keyword))
        } else {
            arrDom.push(h('span', { staticClass: 'custom-keyword' }, keyword))
        }
    })
    arrDom.pop()
    return h('div', {}, arrDom)
}

export default {
    name: 'JsonExpand',
    functional: true,
    props: {
        value: {
            type: String,
            default: ''
        },
        keyword: {
            type: String,
            default: ''
        }
    },
    render: (h, ctx) => {
        const value = ctx.props.value;
        const keyword = ctx.props.keyword;
        return customDom(h, { value, keyword })
    }
};