高亮显示Gmail邮件的匹配内容

Question

我的应用程序的用例是从api获取主题列表并解析内容 形成当前打开的gmail消息。我已经从自己的api中获取了主题，并且 通过查询来使用gmail api从当前打开的gmail消息中解析内容 跟随api

https://www.googleapis.com/gmail/v1/users/userId/messages/id

这将以字符串格式给出gmail消息中的所有内容。我用了 indexOf最多可匹配6个主题，但无法在gmail消息中突出显示。

我现在如何突出显示并使其具有超链接？

这是我所做的

function fetchTopics() {
    console.log('fetchTopics started');
    chrome.storage.sync.get(['user_token', 'gmail_token'], function(result) {
        const decoded = JSON.parse(atob(result.user_token));
        const access_token = decoded['access-token'];
        const gmail_token = result.gmail_token;
        const email = decoded['uid'];
        const headers = new Headers();
        headers.append('Access-Token', access_token);
        headers.append('Client', decoded['client']);
        headers.append('uid', email);
        headers.append('Expiry', decoded['expiry']);
        headers.append('Token-Type', decoded['token-type']);
        const apiUrl = `https://hello.ngrok.io/useful_topics`;
        fetch(apiUrl, {
            method: 'GET',
            headers
        })
            .then(function(response) {
                return response.json();
            })
            .then(function(data) {
                console.log('data', data);
                window.chrome.storage.sync.set(
                    { user_topics: data.topics },
                    function() {
                        searchPage(data, gmail_token);
                    }
                );
            });
    });
}

function searchPage(topic, token) {
    // sample https://www.googleapis.com/gmail/v1/users/userId/messages/id
    const userId = 'someemail@gmail.com';
    const messageId = location.hash.split('/')[1];
    console.log('messageId', messageId);
    const apiUrl = `https://www.googleapis.com/gmail/v1/users/${userId}/messages/${messageId}`;
    const headers = new Headers();
    headers.append('Authorization', `Bearer ${token}`);
    fetch(apiUrl, {
        method: 'GET',
        headers
    })
        .then(function(response) {
            return response.json();
        })
        .then(function(data) {
            highlight(topic, data);
        });
}

function highlight(topics, data) {
    let contents = '';
    switch (data.payload.mimeType) {
        case 'text/html':
            contents = data.payload.body.data;
            break;
        case 'multipart/alternative':
            contents =
                data.payload.parts &&
                (data.payload.parts[0].body.data || data.payload.parts[1].body.data);
            break;
        default:
            contents =
                data.payload.body.data ||
                (data.payload.parts &&
                    (data.payload.parts[0].body.data || data.payload.parts[1].body.data));
            break;
    }
    const decodeContent = atob(contents.replace(/-/g, '+').replace(/_/g, '/'));
    let found = 0;
    for (var key in topics.topics) {
        console.log('key', key);
        if (topics.topics.hasOwnProperty(key)) {
            if (decodeContent.indexOf(key) >= 0) {
                found += 1;
                if (found <= 6) {
                    console.log('key', key, found);
          // how do i highlight and make the matced content hyperlink
                } else {
                    return;
                }
            }
        }
    }
}

// Run when the whole document loads
$(window).bind('load', function() {
    const emailDOM = document.getElementsByClassName('gb_Db');
    if (emailDOM) {
        window.chrome.storage.sync.set(
            { user_email: emailDOM[0].innerText },
            function() {}
        );
    }
    document.addEventListener('click', init);
});

// Run on every hash change (when opening new mail)
$(window).on('hashchange', function() {
    console.log('location', location.hash.split('/'));
    if (location.hash.split('/')[1]) {
        window.chrome.storage.sync.get(['user_topics'], function(result) {
            if (!result.user_topics) {
                fetchTopics();
            } else {
                topics['topics'] = result.user_topics;
                chrome.storage.sync.get(['gmail_token'], function(result) {
                    if (result.gmail_token) {
                        searchPage(topics, result.gmail_token);
                    }
                });
            }
        });
    }
});