使用Javascript将某些单词替换为指向定义的链接

我正在尝试创建一个词汇表系统，该系统将通过ajax获取常用词及其定义的列表，然后用指向完整定义的链接替换某些元素（使用

useGlossary

类的元素）中出现的任何词，并在鼠标悬停时提供一个简短的定义。我这样做是可行的，但对于大页面，需要30-40秒，在此期间页面会挂起。我想减少替换所需的时间，或者让替换在后台运行而不挂起页面

我对大多数javascript和鼠标悬停使用jquery。以下是我现有的慢代码：

$(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>";
}

$（文档）.ready（函数（）{
$.get（“fetchGlossary.cfm”，null，glossCallback，json”）；
});
函数glossCallback（数据）
{
$（“.useGlossary”）.each（函数（）{
var$this=$（this）；
用于（数据中的var i）
{
$this.html（$this.html（）；
}
$this.find（“a.glossary”）.qtip（{style:{name:'blue'，tip:true}）
});
}
函数makeLink（m，def）
{
返回“”；
}

---

感谢您的反馈/建议

与其一次又一次地替换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不必在每次替换时都刷新。

在服务器上执行此操作将是最佳选择。谢谢。出于某种原因，这样使用replace（）时不起作用。我不得不取出函数调用并替换为实际字符串，从而失去了保留原始大小写的能力。此外，虽然这会减少一点时间，但它在我们较长的页面上几乎不可用。我可能要在服务器上做。我将把这个问题留一点时间，看看是否还有其他人有其他想法，否则我会接受你的想法。你可以尝试的另一件事是创建一个全局RegExp对象并简单地更改其模式-即RegExp.source=“\\b”+data[I].term+“\\b”。这将减轻每次迭代中反复出现的“新”问题。我相信这可能会有所帮助。我实际上只是看了一下我们的另一个开发人员传递给它的页面，这个该死的东西有超过3000个useGlossary类实例，源代码接近100000行。开始认为这不完全是我的问题。谢谢