javascript - 将页面上的术语链接到纯 JavaScript 中的维基百科文章

Question

浏览时我遇到了 this blog post关于使用 Wikipedia API来自 JavaScript , 将单个搜索词链接到它的定义。在博客文章的末尾，作者提到了可能的扩展，包括:

A plugin which auto links terms to Wikipedia articles.

这完全符合我正在处理的项目要求，但遗憾的是我缺乏扩展 the original source code 的编程技能.我想要的是有一个我可以添加到网页的纯 JavaScript 片段，它将该网页上的所有术语链接到该 wiki 上的内部 wiki 上的文章。

我知道这可能要求很高，但代码看起来就快完成了，如果有人愿意为虚拟信用完成剩余工作，我愿意增加赏金。;) 我也怀疑这一点可能对其他一些人有值(value)，因为我看到过类似的请求，但没有有效的实现(这只是一个 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 array 包含正确格式化的字符串以使用正则表达式进行匹配，因此请务必使用 \\逃离[]\.?*+|(){}^&

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

termlinker.js只是对定义的术语进行简单的正则表达式搜索替换。它可能是一个内联 <script>也。要求 dictionary.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>";
}); 

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

所有的东西放在一起你会得到 this (jsbin preview)

---

使用 API

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

// 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);