javascript - 使用 Javascript 将某些单词替换为定义链接

Question

我正在尝试创建一个词汇表系统，它将通过ajax获取常用单词及其定义的列表，然后将某些元素(具有 useGlossary 类的元素)中出现的任何该单词替换为完整定义的链接并提供有关鼠标悬停的简短定义。我的方法有效，但对于大页面，需要 30-40 秒，在此期间页面会挂起。我想减少替换所需的时间，或者使替换在后台运行而不挂起页面。

我在大部分 JavaScript 中使用 jquery，并且 Qtip用于鼠标悬停。这是我现有的慢速代码:

$(document).ready(function () {
    $.get("fetchGlossary.cfm", null, glossCallback, "json");
});

function glossCallback(data)
{

    $(".useGlossary").each(function() {
        var $this = $(this);
        for (var i in data)
        {

            $this.html($this.html().replace(new RegExp("\\b" + data[i].term + "\\b", "gi"), function(m) {return makeLink(m, data[i].def);}));
        }
        $this.find("a.glossary").qtip({ style: { name: 'blue', tip: true } })
    });
}

function makeLink(m, def)
{
    return "<a class='glossary glossary" + m.replace(/\s/gi, "").toUpperCase() + "' href='reference/glossary.cfm' title='" + def + "'>" + m + "</a>";
}

感谢您的任何反馈/建议!

Answer 1

与其一遍又一遍地替换 HTML，为什么不像这样修改你的函数:

function glossCallback(data) 
{ 

    $(".useGlossary").each(function() { 
        var $this = $(this); 
        var html = $this.html();
        for (var i in data) 
        { 

            html.replace(new RegExp("\\b" + data[i].term + "\\b", "gi"), function(m) {return makeLink(m, data[i].def);}); 
        }
        $this.html(html);
        $this.find("a.glossary").qtip({ style: { name: 'blue', tip: true } }) 
    }); 
}

通过这种方式，DOM 不必在每次替换时刷新。