使用纯 JavaScript 将页面上的术语链接到维基百科文章

Question

在浏览时我遇到了 这个博客发布关于使用 Wikipedia API（来自 JavaScript，将单个搜索词链接到其定义。在博客文章的末尾，作者提到了可能的扩展，包括：

一个自动将术语链接到维基百科文章的插件。

这完全符合我正在处理的项目要求，但遗憾的是我缺乏扩展 原始源代码。我想要的是有一个可以添加到网页的纯 JavaScript 片段，它将该网页上包含内部 wiki 上的文章的所有术语链接到该 wiki。

我知道这可能要求很高，但代码看起来已经差不多了，如果有人愿意为该虚拟信用完成剩余的工作，我愿意添加赏金..；）我也怀疑这可能是对其他一些人来说很有价值，因为我见过类似的请求，但没有有效的实现（这只是一个 JavaScript（因此可移植）库/片段）。

这是原始源代码的示例，我希望任何人都能够添加到此示例，或者指出如果我自己实现这个示例，我需要添加什么（在这种情况下，如果我设法做到的话，我将分享代码把一些东西放在一起）。

<script type="text/javascript"><!--
var spellcheck = function (data) {
    var found = false; var url=''; var text = data [0];
    if (text != document.getElementById ('spellcheckinput').value)
        return;
    for (i=0; i<data [1].length; i++) {
        if (text.toLowerCase () == data [1] [i].toLowerCase ()) {
            found = true;
            url ='http://en.wikipedia.org/wiki/' + text;
            document.getElementById ('spellcheckresult').innerHTML = '<b style="color:green">Correct</b> - <a target="_top" href="' + url + '">link</a>';
        }
    }
    if (! found)
        document.getElementById ('spellcheckresult').innerHTML = '<b style="color:red">Incorrect</b>';
};

var getjs = function (value) {
    if (! value)
        return;
    url = 'http://en.wikipedia.org/w/api.php?action=opensearch&search='+value+'&format=json&callback=spellcheck';
    document.getElementById ('spellcheckresult').innerHTML = 'Checking ...';
    var elem = document.createElement ('script');
    elem.setAttribute ('src', url);
    elem.setAttribute ('type','text/javascript');
    document.getElementsByTagName ('head') [0].appendChild (elem);
};--></script>
<form action="#" method="get" onsubmit="return false"> 
<p>Enter a word - <input id="spellcheckinput" onkeyup="getjs (this.value);" type="text"> <span id="spellcheckresult"></span></p></form>

---

更新
正如评论中所指出的，链接所有单词所需的时间以及如何处理跨单词的文章名称也是我所关心的。

我认为从单个单词的文章开始已经涵盖了很大一部分用例，当跳过英语中的 500 个最常见单词时，可能会获得一些性能优势，但我仍然不确定这种方法的可行性。

但从好的方面来说，这将全部是客户端，并且会出现一些延迟在链接方面是完全可以接受的。

或者，搜索鼠标悬停/选择的术语也可能是可以接受的，但我不确定这是否会降低或增加复杂性。

---

更新 2

下面解释了此功能可能是“Pointy”从 api.php?action=query&list=allpages 获取文章主题列表后，通过更改一些相当标准的突出显示脚本来实现。
重申一下：我们使用的是内部 wiki，因此文章列表可能是有限的、明确的且特定于领域的，足以克服匹配单词中的一些预期问题。

由于到目前为止我们已经提出了一些好的建议和一些可行的想法，因此我开始悬赏，看看是否能得到一些答案。

Answer 1

也许这样的东西可能会有所帮助：

假设非常简单的 HTML/文本，如下所示：

<div id="theText">Testing the auto link system here...</div>

和两个非常小的脚本。

dictionary.js 设置您的术语列表。我的想法是，如果需要的话，可以通过查询文章数据库在 php 中生成。它还可以跨域加载（因为它设置了window.termsRE）。如果您不需要从数据库生成列表，您也可以使用 termlinker.js 手动添加。

生成 RegExp 的代码假定您的 terms 数组包含格式正确的字符串以使用正则表达式进行匹配，因此请务必使用 \\ 转义 []\ .?*+|(){}^&

// dictionary.js - define some terms
var terms = ['testing', 'auto link'];
window.termsRE = new RegExp("\\b("+terms.join("|")+")\\b",'gi');

termlinker.js 只是定义术语的简单正则表达式搜索替换。它也可以是内联

// termlinker.js - add some tags
var element = document.getElementById("theText");

element.innerHTML = element.innerHTML.replace(termsRE, function(term) {
  return "<a href='http://en.wikipedia.org/wiki/"+escape(term)+"'>"+term+"</a>";
}); 

这只是搜索术语数组中的任何单词并将其替换为该术语的链接。当然，它还会匹配 HTML 标记内的属性和值，这可能会稍微破坏您的标记。

将所有内容放在一起，您将得到此（jsbin 预览版）

---

API

使用基于之前的“最小情况”的 ，这里是使用 API 直接接收单词列表和jsbin 预览的代码示例

// Utility Function
RegExp.escape = function(text) {
  if (!arguments.callee.sRE) {
    var specials = [
      '/', '.', '*', '+', '?', '|',
      '(', ')', '[', ']', '{', '}', '\\'
    ];
    arguments.callee.sRE = new RegExp(
      '(\\' + specials.join('|\\') + ')', 'g'
    );
  }
  return text.replace(arguments.callee.sRE, '\\$1');
};

// JSONP Callback for receiving the API
function receiveAPI(data) {
  var terms = [];
  if (!data || !data['query'] || !data['query']['allpages']) return false;  
  var pages = data.query.allpages
  for (var x in pages) {
    terms.push(RegExp.escape(pages[x].title));
  }
  window.termsRE = new RegExp("\\b("+terms.reverse().join("|")+")\\b",'gi');
  linkterms();
}  

function linkterms() {
  var element = document.getElementById("theText");

  element.innerHTML = element.innerHTML.replace(termsRE, function(term) {
    return "<a href='http://en.wikipedia.org/wiki/"+escape(term)+"'>"+term+"</a>";
  });
}


// the apfrom=testing can be removed, it is only there so that
// we can get some useful terms near "testing" to work with.
// we are limited to 500 terms for the purpose of this demo:
url = 'http://en.wikipedia.org/w/api.php?action=query&list=allpages&aplimit=500&format=json&callback=receiveAPI' + '&apfrom=testing';
var elem = document.createElement('script');
elem.setAttribute('src', url);
elem.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild (elem);