Jquery 在AJAX响应中查找/替换某些链接

当用户将鼠标悬停在网站上的词汇表单词上时，我使用qTip来AJAX一些内容。有时，AJAX响应包含指向站点上其他文件的相对链接。问题是AJAX响应中的链接试图从用户所在的当前页面解析，而不是从调用内容的页面解析

例子 用户位于页面

/topics/flying/mistheground.html

。用户悬停在术语表术语上，进行AJAX调用，并从

/glossary.html

中提取内容。AJAX响应具有指向站点中另一个文件的相对链接，例如，

topics/swiming/downless.html

。单击AJAX响应中的链接时，它尝试从当前页面解析，结果是：

/topics/flying/topics/swiming/downless.html

如何修改AJAX响应？有两件事我需要修改：

响应中的本地锚链接需要将用户从当前页面重定向到词汇表页面（指向正确的目标）。

• 查找以“#”开头的href并附加一个字符串，该字符串将本地目标链接更改为指向

  /glossary.html

  的链接

响应中的相对链接需要将用户从当前页面重定向到链接页面的正确位置。

• 查找一个以“topics”开头的href，并附加一个字符串，将目标更改为绝对值（从根位置）

  /topics/running/goFast.html

我的AJAX代码：

content: {
    text: 'Loading...',
    ajax: {
        url: '<local file> #' + $(this).text().toLowerCase(),
        success: function (elems) {
            if (elems.length) {
                this.set('content.text', elems);
                var $elems = $(elems);
            } else {
                this.destroy();
            }
        }
    }
},

内容：{
文本：“正在加载…”，
阿贾克斯：{
url:“#”+$（this.text（）.toLowerCase（），
成功：功能（元素）{
if（元素长度）{
此.set（'content.text'，elems）；
变量$elems=$（elems）；
}否则{
这个。销毁（）；
}
}
}
},

您可以执行以下两种替换操作

术语表是否替换：

var glossaryUrl = "<mysite>/glossary.html";
$(elems).find('a[href^="#"]').each(function(i, link) {
    var originalLink = $(link).attr('href');
    $(link).attr('href', glossaryUrl + originalLink);
});

var glossaryUrl=“/glossary.html”；
$（elems）.find（'a[href^=“#”]”）。每个（函数（i，链接）{
var originalLink=$（link.attr（'href'）；
$（link.attr（'href'，glossaryUrl+originalLink）；
});

主题是否替换：

var topicsUrl = "<mysite>/";    // The trailing forward slash is important
$(elems).find('a[href^="topics"]').each(function(i, link) { 
    var originalLink = $(link).attr('href');
    $(link).attr('href', topicsUrl + originalLink);
});

var-topicsUrl=“/”；//后面的正斜杠很重要
$（elems）.find（'a[href^=“topics”]”）。每个（函数（i，链接）{
var originalLink=$（link.attr（'href'）；
$（link.attr（'href'，topicsUrl+原始链接）；
});

您可以执行以下两种替换操作

术语表是否替换：

var glossaryUrl = "<mysite>/glossary.html";
$(elems).find('a[href^="#"]').each(function(i, link) {
    var originalLink = $(link).attr('href');
    $(link).attr('href', glossaryUrl + originalLink);
});

var glossaryUrl=“/glossary.html”；
$（elems）.find（'a[href^=“#”]”）。每个（函数（i，链接）{
var originalLink=$（link.attr（'href'）；
$（link.attr（'href'，glossaryUrl+originalLink）；
});

主题是否替换：

var topicsUrl = "<mysite>/";    // The trailing forward slash is important
$(elems).find('a[href^="topics"]').each(function(i, link) { 
    var originalLink = $(link).attr('href');
    $(link).attr('href', topicsUrl + originalLink);
});

var-topicsUrl=“/”；//后面的正斜杠很重要
$（elems）.find（'a[href^=“topics”]”）。每个（函数（i，链接）{
var originalLink=$（link.attr（'href'）；
$（link.attr（'href'，topicsUrl+原始链接）；
});

关于相对URL：为什么不在相对URL前面加一个正斜杠服务器端？例如，

href=“/topics/running/goFast.html”

可以工作，而无需浏览所有链接和预先编写内容。网站内容内置于创作工具中。一旦内容由工具生成，它将上载到服务器上的面向版本的目录中-因此根URL总是在更改，但创作工具中主题之间的相对链接总是相同的。关于相对URL：为什么不在相对URL前面加一个正斜杠服务器端？例如，

href=“/topics/running/goFast.html”

可以工作，而无需浏览所有链接和预先编写内容。网站内容内置于创作工具中。一旦工具构建了内容，它就会被上传到服务器上的面向版本的目录中——因此根URL总是在变化，但创作工具中主题之间的相对链接总是相同的。