xkcd api，怎么看解释？
xkcd api, how to read explanations?
xkcd 漫画有一个 json api 来读取关于一个特定 comic/stripe 的元数据。
例如。要获取 json 数据，我可以使用：
https://xkcd.com/json.html
https://xkcd.com/2173/info.0.json
但是没有包含xkcd的解释。可以在另一页找到：
https://www.explainxkcd.com/wiki/index.php?title=2173:_Trainea_Neural_Net&oldid=176507
我怎样才能通过 api 获得解释，可能吗？ （我不想使用 curl 抓取整个 Html 页面。）
如果按照解释，您指的是当您将鼠标悬停在漫画上时出现的文本，即所谓的 alt 文本。它在返回的 JSON 中可用：
{
"month": "7",
"num": 2173,
"link": "",
"year": "2019",
"news": "",
"safe_title": "Trained a Neural Net",
"transcript": "",
"alt": "It also works for anything you teach someone else to do. \"Oh yeah, I trained a pair of neural nets, Emily and Kevin, to respond to support tickets.\"",
"img": "https://imgs.xkcd.com/comics/trained_a_neural_net.png",
"title": "Trained a Neural Net",
"day": "8"
}
如果你指的是explainxkcd.com的解释，那就是不同的API。它使用 mediawiki 平台（与维基百科使用的平台相同）。您可以在他们的网站 including an example on how to parse text.
上找到 API 文档
示例输出：
{
"parse": {
"title": "2172: Lunar Cycles",
"pageid": 22099,
"wikitext": {
"*": "{{comic\n| number = 2172\n| date = July 5, 2019\n| title = Lunar Cycles\n| image = lunar_cycles.png\n| titletext = The Antikythera mechanism had a whole set of gears specifically to track the cyclic popularity of skinny jeans and low-rise waists.\n}}\n\n==Explanation==\n{{incomplete|Created by a MOONBOT. Joke cycle explanations need to be expanded and title text needs to be explained. Do NOT delete this tag too soon.}}\n\nThis comic shows a mixture of real, scientific lunar cycles and cycles that are comedic or fictional in nature.\n\n*'''Nodal precession:''' The Moon's orbital plane is tilted slightly compared to the Earth's orbital plane around the sun (the {{w|ecliptic}}). This tilt is why we don't constantly see eclipses; most of the time, the Moon's orbital plane is tilted higher or lower than the Sun, so they generally don't cross each other. The two points at which these planes ''do'' cross are called {{w|lunar nodes}}. {{w|Nodal precession}} is the gradual rotation of these nodes over time, which for the Moon follows an 18.6 year cycle.\n\n*'''Apsidal precession:''' All orbits have two points where the orbiting body is either closest to, or furthest away from, the thing they are orbiting. These points are called {{w|apsides}}, and the imaginary line between them is called the ''line of apsides''. {{w|Apsidal precession}} is the gradual rotation of this line over time, which occurs in cycles of around 8.9 years for the Moon.\n\n*'''Phase:''' {{w|Lunar phase}} describes the change in shape of the sunlit side of the Moon as viewed from the Earth's surface, which is caused by the changing angle between Moon and Sun as the Moon revolves around the Earth. The cycle of lunar phases takes 29.5 days, a figure referred to as the ''synodic month''.\n\n*'''Distance:''' Because the Moon's orbit around the Earth is elliptical, its distance from the Earth varies slightly over the course of an orbit. This means that the moon's distance also follows a cycle which is the same as the length of one lunar orbit: approximately 27.5 days. This figure is referred to as the ''anomalistic month''. Note that the synodic month is (perhaps counterintuituvely) two days ''longer'' than the sidereal month - or to put it another way, it takes 2 more days for the Moon's phases to cycle than it does for the Moon to go around the Earth. This is due to the fact that the Earth is also moving ''around'' the Sun while the phases are going on, which means that the Moon has to spend 2 extra days \"catching up\" to the point at which the lunar phase cycle can restart.\n\n*'''Earth-Moon relative size''': This is a joke cycle; the Earth and Moon do not physically change size, nor does the Moon ever become larger than the Earth. This may be playing on the idea that the Moon often ''appears'' to change size to viewers on Earth, due to various factors; most commonly, this is due to the {{w|Moon illusion}}, which tricks the brain into perceiving the Moon as much larger than it really is. There are also so-called {{w|supermoon}}s, which occur when the full moon coincides with the Moon's closest approach to Earth; these actually do increase the Moon's apparent size, although by a relatively insignificant amount.\n\n*'''Lunar shape:''' Again, this is a joke cycle; the Moon does not actually change shape. A shape intermediate between circle and square is known as a {{w|squircle}}, a subclass of the {{w|superellipse}}.\n\n*'''Lunar mood:''' The moon does not have a mood, although humans can have moods that fluctuate over time, sometimes with a regularity akin to a cycle. Ironically, the section of the graph that shows a good (i.e. happy) mood has the graph line curving up then down like the mouth of a frown, and for the bad (unhappy) mood it curves down and then up, as in the mouth of a smile.\n\n* The final diagram shows many different cycles superimposed on each other, highlighting areas where several cycles are coinciding. This is likely satirizing the media trend of overhyping astronomical coincidences and giving them grand-sounding names:\n:*The light gray \"phase \u00d7 distance\" plot does not correspond to the product of periods given for phase and distance, which [https://i.imgur.com/0i0mcPn.png look like this] instead.\n:*A [[wikipedia:harvest moon|harvest moon]] is the traditional name for the full moon closest to the autumnal equinox, but there is nothing astronomically significant about it.\n:*A [[wikipedia:Supermoon|supermoon]] is a full or new moon when the Moon is closest to the Earth, resulting in a slightly larger-than-usual apparent size. A full supermoon is roughly 14% larger in diameter than when the Moon is furthest away. See also [[1394: Superm*n]].\n:*A [[wikipedia:blue moon|blue moon]] is the extra full moon in years with 13 full moons, which happens once every two or three years (hence the phrase \"once in a blue moon\"). Blue moons don't look any different from regular full moons.\n:*{{w|Astrology}} is a pseudoscience which claims that the positions of the celestial bodies can be used to predict human affairs. The chart jokingly suggests that astrology actually ''does'' work, but only within a very specific two-week timeframe.\n:*The [[wikipedia:Golden Age of Television|Golden Age of Television]] is said to have occurred in the 1940s and 50s, and the 2000s.\n:*There are no occurrences of '''dire moon''' or '''pork moon''' in the Google Books N-Gram viewer, which includes many works from the 1800s through 2008. A [[wikipedia:blood moon|blood moon]] refers to the moon during a lunar eclipse.\n:*While the popularity of '''skinny jeans''' ([[wikipedia:Slim-fit pants|slim-fit pants]]) does change over time, the idea that this is connected to a lunar cycle is also a joke.\n:*Finally, while the idea of a '''total eclipse of the sea''' seems absurd, [https://www.deepseanews.com/2017/08/what-happens-in-the-sea-during-a-solar-eclipse/ an eclipse was famously used to explain the migration of maritime animals]:\n:::''biologists were beginning to unravel the mystery of this \u2018false bottom\u2019\u2013a layer in the ocean that looks the the sea floor on the sounder but isn\u2019t\u2013which covered much of the ocean. This false bottom rises in up at night and sinks down during the day. This rising and falling is in fact caused by the largest migration of animal on Earth\u2013everything from fish, shrimp and jellyfish, moving hundreds of meters in unison up and down each day.... the moon moved into its place in front of the sun, daylight rapidly faded, and the scientists solved the migration mystery: the deep layer of animals began to rise. Bioluminescent creatures started to shine, and nocturnal creatures started a frantic upward thrust. As the world grew darker, they swam upward nearly 80 meters. But this frantic migration didn\u2019t last long. As the moon receded and the sun revealed itself, the massive animal layer did an about-face, scrambling back into the safety of the darkness.''\n:: (Backus, Clark, and Wing (1965) [https://sci-hub.tw/10.1038/205989a0 \"Behaviour of certain marine organisms during the solar eclipse of July 20, 1963\"] ''Nature'' '''4975:'''989-91.)\nThe '''{{w|Antikythera_mechanism|Antikythera mechanism}}''' mentioned in the title text is an ancient Greek machine, rediscovered in 1901, designed to calculate astronomical positions. The title text jokes that there is a set of gears on said mechanism that is used to predict the popularity of \"skinny jeans\" and \"low-rise waists.\" Since it was likely created in the 1st or 2nd century B.C., it is impossible for the creators to have had any knowledge of skinny jeans or low-rise waists - both are modern-day clothing fashions.\n\n==Transcript==\n{{incomplete transcript|Do NOT delete this tag too soon.}}\n\n:Understanding lunar cycles\n\n:Nodal precession\n:[A diagram showing a broad cosine-like wave with wavelength labelled as 18.6 years. To the right are two diagrams showing an orbital cycle moving in and out of plane.]\n\n:Apsidal precession\n:[A diagram similar to the one above but with a slightly shorter wavelength, labelled as 8.9 years. To the right are two diagrams showing an elliptical orbit around a planet and the same orbit rotated.]\n\n:Phase\n:[A diagram similar to those above with a shorter wavelength, labelled as 29.5 days. To the right is a diagram showing four phases of the moon: New, Waxing crescent, Waxinf gibbos, Full.]\n\n:Distance\n:[A diagram similar to those above with a shorter wavelength, labelled as 27.5 days. To the right is a diagram showing the distance of the moon from the Earth over time, with distances marked by arrows.]\n\n:Earth-Moon relative size\n:[A wave with long wavelength with an arrow pointing to the minimum labelled 'Earth bigger' and an arrow pointing to the maximum labelled 'Moon bigger'. To the right are two diagrams of the moon and Earth, one showing the Earth bigger than the Moon and the other showing the Moon bigger than the Earth.]\n\n:Lunar shape\n:[A wave with long wavelength with an arrow pointing to the minimum labelled 'Circle' and an arrow pointing to the maximum labelled 'Square'. To the right is a diagram showing a circle, a circle transforming into a square with outward arrows at each corner and a square transforming into a circle with inward arrows.]\n\n:Lunar mood\n:[A wave with long wavelength with an arrow pointing to the minimum labelled 'Bad' and an arrow pointing to the maximum labelled 'Good'. To the right are four emojis: :), :|, :(, :|]\n\n:[A superimposed graph of all the above waves. Different points on the graph are labelled: Harvest moon, Supermoon, Blue moon, Skinny Jeans popular, Super blood moon, Golden age of TV, Dire moon, Pork moon, Two week window in which astrology works, Total eclipse of the sea.]\n\n\n\n{{comic discussion}}"
}
}
}
我自己今天也在想这个问题，毫不奇怪，有人以 xkcd explainer Chrome extension. Specifically, the repository that houses the code for the extension has a parser.js file (i.e., the hard work that has been done for us) and a main.js 文件的形式为我们完成了大部分艰苦的工作，该文件是在考虑浏览器的情况下构建的，但其逻辑和功能可以很容易被抽象出来仍然尊重主要目标和在不同的环境中（例如，Node.js）：以易于使用的方式获取 XKCD 漫画的解释。
下面的代码片段包含我的 reworking/merging 的 parser.js 和 main.js 文件链接到上面。可以直接在浏览器控制台中复制并粘贴合适的代码块以查看效果：
上面的例子是针对下面代码中 loadExplain(74) 给出的 comic 74。只需将 loadExplain(num) 中的 num 更改为您想要解释 HTML 的漫画编号或 loadExplain() 为最新漫画。
// parser.js
let comicid = 0;
let refNum = 0;
let refs = [];
function wikiparse(wikitext, num){
comicid = num;
let lines = wikitext.split(/\r?\n/);
let html = "";
let bulletLevel = 0; //level of bullet points
let quotes = 0; //previous line was quote
let tablerow = false; //true if currently in table row
for(let i = 0; i < lines.length; i++){
let line = lines[i];
if(line !== ""){
line = convertLine(line); //perform simple inline parsing
if(line[0] === "*"){ //bullet points
let bulletNum = line.match(/^\*+/)[0].length; //number of * in front of string
line = "<li>" + line.replace(/^\*+ */, "") + "</li>";
if(bulletLevel < bulletNum){ //start of new level of bulleting
line = "<ul>" + line;
bulletLevel++;
}
else if(bulletLevel > bulletNum){ //end of level
line = "</ul>" + line;
bulletLevel--;
}
}
else if(bulletLevel > 0){ //end of bulleting
line = "</ul><p>" + line + "</p>";
bulletLevel--;
}
else if(line[0] === ":"){ //quotes
line = "<dd>" + line.substring(1) + "</dd>";
if(!quotes){ //start of quote
line = "<dl>" + line;
quotes = 1;
}
}
else if(quotes){ //end of quote
line = "</dl><p>" + line + "</p>";
quotes = 0;
}
else if(line[0] === '{' && line[1] === '|'){ //tables
line = "<table " + line.substring(2) + ">";
}
else if(line[0] === '|' && line[1] == '-'){ //start of table row
line = "";
tablerow = true;
}
else if(line[0] === '|' && line[1] === '}'){ //end of table
line = "</table>"; //no rows?
tablerow = false;
}
else if(line[0] === '!'){ //table heading
line = "<th>" + line.substring(1).replace(/!!/g, "</th><th>") + "</th>";
if(tablerow){
line = "<tr>" + line + "</tr>";
tablerow = false;
}
}
else if(line[0] === '|'){ //table cell
line = "<td>" + line.substring(1).replace(/\|\|/g, "</td><td>") + "</td>";
if(tablerow){
line = "<tr>" + line + "</tr>";
tablerow = false;
}
}
else line = "<p>" + line + "</p>"; //regular text
html += line;
}
}
if(refNum > 0) {
let refFormatted = "<div class='references'><ol>";
for(let i = 0; i < refs.length; i++) {
refFormatted += "<li id='note-" + i + "'><a href='#ref-" + i + "'>↑</a><span>" + refs[i] + "</span></li>";
}
refFormatted += "</ol></div>";
html += refFormatted;
}
return html;
}
function convertLine(line){ //replace simple inline wiki markup
//headings and subheadings
//format ==<text>== -> <h2>, ===<text>=== -> h3, etc.
if(line[0] === '=' && line[line.length - 1] === '='){
let headingLeft = line.match(/^=+/)[0].length; //number of '='s on the left
let headingRight = line.match(/=+$/)[0].length; //number of '='s on the right
let headingNum = Math.min(headingLeft, headingRight);
if(headingNum >= 1 && headingNum <= 6){
line = "<h" + headingNum + ">" + line.substring(headingNum, line.length - headingNum) + "</h" + headingNum + ">";
}
}
//link to another xkcd comic
//format: [[<id>: <title]] or [[<id>: <title>|<id>]]
line = line.replace(/\[\[([0-9]+): [^\]]+(|)?\]\]/g, convertComicLink);
//link to within explain page
//format: [[#<heading>|<display>]]
line = line.replace(/\[\[#[^\]]+\]\]/g, convertHeadingLink);
//internal links
//format: [[<target>]] or [[<target>|<display>]]
line = line.replace(/\[\[[^\]]+\]\]/g, convertInternalLink);
// citation needed
//format: {{Citation needed}}
line = line.replace(/{{Citation needed}}/g, convertCitationLink);
//what if links
//format: {{what if|<id>|<title>}}
line = line.replace(/{{what if(\|[^\|]+){1,2}}}/g, convertWhatIfLink);
//wikipedia links
//format: {{w|<target>}} or {{w|<target>|<display>}} (or W)
line = line.replace(/{{[wW](\|[^}]+){1,2}}}/g, convertWikiLink);
//tvtropes links
//format: {{tvtropes|<target>|<display>}}
line = line.replace(/{{tvtropes(\|[^}]+){2}}}/g, convertTropesLink);
//other external links
//format: [http://<url>] or [http://<url> <display>] (includes https)
line = line.replace(/\[((http|https):)?\/\/([^\]])+]/g, convertOtherLink);
//references
line = line.replace(/<ref>.+<\/ref>/g, convertRefLink);
//bold
//format: '''<text>'''
line = line.replace(/'''(?:(?!''').)+'''/g, convertBold);
//italics
//format: ''<text>'' or ''<text>
line = line.replace(/''[^('')\n]+''/g, convertItalics)
.replace(/''.+/g, convertItalics);
return line;
}
function convertComicLink(link){
let firstSep = link.indexOf(":");
let secondSep = link.indexOf("|");
let id = link.substring(2, firstSep);
let display = "";
if(secondSep === -1) {
let title = link.substring(firstSep + 2, link.length - 2);
display = id + ": " + title;
}
else {
display = link.substring(secondSep + 1, link.length - 2);
}
return '<a href="https://xkcd.com/' + id + '">' + display + '</a>';
}
function convertHeadingLink(link){
let target = link.substring(3, link.length-2);
let display = "";
let separator = target.indexOf("|");
if(separator === -1){
display = target;
}
else{
display = target.substring(separator + 1);
target = target.substring(0, separator);
}
return '<a href="http://www.explainxkcd.com/' + comicid + '#' + encodeURIComponent(target) + '" title="' + target + '">' + display + '</a>';
}
function convertInternalLink(link){
let target = link.substring(2, link.length-2);
let display = "";
let separator = target.indexOf("|");
if(separator === -1){
display = target;
}
else{
display = target.substring(separator + 1);
target = target.substring(0, separator);
}
return '<a href="http://www.explainxkcd.com/wiki/index.php/' + encodeURIComponent(target) + '" title="' + target + '">' + display + '</a>';
}
function convertCitationLink(){
return '<sup>[<a href="/285" title="285" class="mw-redirect"><i>citation needed</i></a>]</sup>';
}
function convertWhatIfLink(link){
let firstSep = link.indexOf("|") + 1;
let secondSep = link.indexOf("|", firstSep);
let id = link.substring(firstSep, secondSep);
let title = link.substring(secondSep + 1, link.length - 2);
return '<a rel="nofollow" href="http://what-if.xkcd.com/' + id + '">' + title + '</a>';
}
function convertWikiLink(link){
let target = link.substring(4, link.length-2);
let display = "";
let separator = target.indexOf("|");
if(separator === -1){
display = target;
}
else{
display = target.substring(separator + 1);
target = target.substring(0, separator);
}
return '<a href="http://en.wikipedia.org/wiki/' + encodeURIComponent(target) + '" title="wikipedia:' + target + '">' + display + '</a>';
}
function convertTropesLink(link){
let firstSep = link.indexOf("|") + 1;
let secondSep = link.indexOf("|", firstSep);
let target = link.substring(firstSep, secondSep);
let display = link.substring(secondSep + 1, link.length - 2);
return '<a rel="nofollow" class="external text" href="http://tvtropes.org/pmwiki/pmwiki.php/Main/' + target + '">' +
'<span style="background: #eef;" title="Warning: TV Tropes. See comic 609.">' + display + '</span>' +
'</a>';
}
function convertOtherLink(link){
let separator = link.indexOf(" ");
let target = "";
let display = "";
if(separator === -1){
target = link.substring(1, link.length - 1);
display = "[X]";
}
else{
target = link.substring(1, separator);
display = link.substring(separator + 1, link.length - 1);
}
return '<a rel="nofollow" href="' + encodeURI(target) + '">' + display + '</a>';
}
function convertRefLink(link) {
let display = link.substring(5, link.length - 6);
refNum++;
refs.push(display);
return "<sup id='ref-" + (refNum - 1) + "'><a href='#note-" + (refNum - 1) + "'>[" + refNum + "]</a></sup>";
}
function convertBold(text){
return "<b>" + text.substring(3, text.length - 3) + "</b>";
}
function convertItalics(text){
if(text.substr(-2) === "''") {
return "<i>" + text.substring(2, text.length - 2) + "</i>";
}
return "<i>" + text.substring(2) + "</i>";
}
// main.js
async function getJSON(url, callback){
const response = await fetch(url);
const responseJSON = await response.json()
callback(responseJSON);
}
async function loadExplain(comic = ''){
if (comic === '') {
let latestComic = await fetch("https://explainxkcd.com/wiki/api.php?action=expandtemplates&format=json&origin=*&text={{LATESTCOMIC}}");
latestComicJSON = await latestComic.json();
comic = +latestComicJSON.expandtemplates['*'];
}
getJSON("https://explainxkcd.com/wiki/api.php?action=query&prop=revisions&rvprop=content&format=json&origin=*&redirects=1&titles=" + comic, function(obj){
let pages = obj.query.pages;
let page = pages[Object.keys(pages)[0]].revisions[0]["*"];
let start = page.indexOf("{{incomplete|");
if(start === -1){ //incomplete tag at the beginning of explanation
start = page.indexOf("== Explanation ==") + 18;
if(start === -1 + 18){
start = page.indexOf("==Explanation==") + 16;
}
if(page[start] == "\n") start++;
}
else{ //complete explanation
start = page.indexOf("\n", start) + 1;
}
let end = page.indexOf("==Transcript==") - 1;
if(end === -1 - 1){
end = page.indexOf("== Transcript ==") - 1;
}
let rawExplain = page.substring(start, end);
let explanation = wikiparse(rawExplain, comic);
let readMore = '<p><b>Read more at the <a href="http://explainxkcd.com/' + comic + '">explain xkcd wiki</a>.</b></p>';
console.log(explanation, readMore);
});
}
// get parsed explanation HTML
// loadExplain(); // for most recent comic
loadExplain(74) // for custom comic (1 - 2296 as of this answer posting)
xkcd 漫画有一个 json api 来读取关于一个特定 comic/stripe 的元数据。
例如。要获取 json 数据，我可以使用： https://xkcd.com/json.html
https://xkcd.com/2173/info.0.json
但是没有包含xkcd的解释。可以在另一页找到：
https://www.explainxkcd.com/wiki/index.php?title=2173:_Trainea_Neural_Net&oldid=176507
我怎样才能通过 api 获得解释，可能吗？ （我不想使用 curl 抓取整个 Html 页面。）
如果按照解释，您指的是当您将鼠标悬停在漫画上时出现的文本，即所谓的 alt 文本。它在返回的 JSON 中可用：
{
"month": "7",
"num": 2173,
"link": "",
"year": "2019",
"news": "",
"safe_title": "Trained a Neural Net",
"transcript": "",
"alt": "It also works for anything you teach someone else to do. \"Oh yeah, I trained a pair of neural nets, Emily and Kevin, to respond to support tickets.\"",
"img": "https://imgs.xkcd.com/comics/trained_a_neural_net.png",
"title": "Trained a Neural Net",
"day": "8"
}
如果你指的是explainxkcd.com的解释，那就是不同的API。它使用 mediawiki 平台（与维基百科使用的平台相同）。您可以在他们的网站 including an example on how to parse text.
上找到 API 文档示例输出：
{
"parse": {
"title": "2172: Lunar Cycles",
"pageid": 22099,
"wikitext": {
"*": "{{comic\n| number = 2172\n| date = July 5, 2019\n| title = Lunar Cycles\n| image = lunar_cycles.png\n| titletext = The Antikythera mechanism had a whole set of gears specifically to track the cyclic popularity of skinny jeans and low-rise waists.\n}}\n\n==Explanation==\n{{incomplete|Created by a MOONBOT. Joke cycle explanations need to be expanded and title text needs to be explained. Do NOT delete this tag too soon.}}\n\nThis comic shows a mixture of real, scientific lunar cycles and cycles that are comedic or fictional in nature.\n\n*'''Nodal precession:''' The Moon's orbital plane is tilted slightly compared to the Earth's orbital plane around the sun (the {{w|ecliptic}}). This tilt is why we don't constantly see eclipses; most of the time, the Moon's orbital plane is tilted higher or lower than the Sun, so they generally don't cross each other. The two points at which these planes ''do'' cross are called {{w|lunar nodes}}. {{w|Nodal precession}} is the gradual rotation of these nodes over time, which for the Moon follows an 18.6 year cycle.\n\n*'''Apsidal precession:''' All orbits have two points where the orbiting body is either closest to, or furthest away from, the thing they are orbiting. These points are called {{w|apsides}}, and the imaginary line between them is called the ''line of apsides''. {{w|Apsidal precession}} is the gradual rotation of this line over time, which occurs in cycles of around 8.9 years for the Moon.\n\n*'''Phase:''' {{w|Lunar phase}} describes the change in shape of the sunlit side of the Moon as viewed from the Earth's surface, which is caused by the changing angle between Moon and Sun as the Moon revolves around the Earth. The cycle of lunar phases takes 29.5 days, a figure referred to as the ''synodic month''.\n\n*'''Distance:''' Because the Moon's orbit around the Earth is elliptical, its distance from the Earth varies slightly over the course of an orbit. This means that the moon's distance also follows a cycle which is the same as the length of one lunar orbit: approximately 27.5 days. This figure is referred to as the ''anomalistic month''. Note that the synodic month is (perhaps counterintuituvely) two days ''longer'' than the sidereal month - or to put it another way, it takes 2 more days for the Moon's phases to cycle than it does for the Moon to go around the Earth. This is due to the fact that the Earth is also moving ''around'' the Sun while the phases are going on, which means that the Moon has to spend 2 extra days \"catching up\" to the point at which the lunar phase cycle can restart.\n\n*'''Earth-Moon relative size''': This is a joke cycle; the Earth and Moon do not physically change size, nor does the Moon ever become larger than the Earth. This may be playing on the idea that the Moon often ''appears'' to change size to viewers on Earth, due to various factors; most commonly, this is due to the {{w|Moon illusion}}, which tricks the brain into perceiving the Moon as much larger than it really is. There are also so-called {{w|supermoon}}s, which occur when the full moon coincides with the Moon's closest approach to Earth; these actually do increase the Moon's apparent size, although by a relatively insignificant amount.\n\n*'''Lunar shape:''' Again, this is a joke cycle; the Moon does not actually change shape. A shape intermediate between circle and square is known as a {{w|squircle}}, a subclass of the {{w|superellipse}}.\n\n*'''Lunar mood:''' The moon does not have a mood, although humans can have moods that fluctuate over time, sometimes with a regularity akin to a cycle. Ironically, the section of the graph that shows a good (i.e. happy) mood has the graph line curving up then down like the mouth of a frown, and for the bad (unhappy) mood it curves down and then up, as in the mouth of a smile.\n\n* The final diagram shows many different cycles superimposed on each other, highlighting areas where several cycles are coinciding. This is likely satirizing the media trend of overhyping astronomical coincidences and giving them grand-sounding names:\n:*The light gray \"phase \u00d7 distance\" plot does not correspond to the product of periods given for phase and distance, which [https://i.imgur.com/0i0mcPn.png look like this] instead.\n:*A [[wikipedia:harvest moon|harvest moon]] is the traditional name for the full moon closest to the autumnal equinox, but there is nothing astronomically significant about it.\n:*A [[wikipedia:Supermoon|supermoon]] is a full or new moon when the Moon is closest to the Earth, resulting in a slightly larger-than-usual apparent size. A full supermoon is roughly 14% larger in diameter than when the Moon is furthest away. See also [[1394: Superm*n]].\n:*A [[wikipedia:blue moon|blue moon]] is the extra full moon in years with 13 full moons, which happens once every two or three years (hence the phrase \"once in a blue moon\"). Blue moons don't look any different from regular full moons.\n:*{{w|Astrology}} is a pseudoscience which claims that the positions of the celestial bodies can be used to predict human affairs. The chart jokingly suggests that astrology actually ''does'' work, but only within a very specific two-week timeframe.\n:*The [[wikipedia:Golden Age of Television|Golden Age of Television]] is said to have occurred in the 1940s and 50s, and the 2000s.\n:*There are no occurrences of '''dire moon''' or '''pork moon''' in the Google Books N-Gram viewer, which includes many works from the 1800s through 2008. A [[wikipedia:blood moon|blood moon]] refers to the moon during a lunar eclipse.\n:*While the popularity of '''skinny jeans''' ([[wikipedia:Slim-fit pants|slim-fit pants]]) does change over time, the idea that this is connected to a lunar cycle is also a joke.\n:*Finally, while the idea of a '''total eclipse of the sea''' seems absurd, [https://www.deepseanews.com/2017/08/what-happens-in-the-sea-during-a-solar-eclipse/ an eclipse was famously used to explain the migration of maritime animals]:\n:::''biologists were beginning to unravel the mystery of this \u2018false bottom\u2019\u2013a layer in the ocean that looks the the sea floor on the sounder but isn\u2019t\u2013which covered much of the ocean. This false bottom rises in up at night and sinks down during the day. This rising and falling is in fact caused by the largest migration of animal on Earth\u2013everything from fish, shrimp and jellyfish, moving hundreds of meters in unison up and down each day.... the moon moved into its place in front of the sun, daylight rapidly faded, and the scientists solved the migration mystery: the deep layer of animals began to rise. Bioluminescent creatures started to shine, and nocturnal creatures started a frantic upward thrust. As the world grew darker, they swam upward nearly 80 meters. But this frantic migration didn\u2019t last long. As the moon receded and the sun revealed itself, the massive animal layer did an about-face, scrambling back into the safety of the darkness.''\n:: (Backus, Clark, and Wing (1965) [https://sci-hub.tw/10.1038/205989a0 \"Behaviour of certain marine organisms during the solar eclipse of July 20, 1963\"] ''Nature'' '''4975:'''989-91.)\nThe '''{{w|Antikythera_mechanism|Antikythera mechanism}}''' mentioned in the title text is an ancient Greek machine, rediscovered in 1901, designed to calculate astronomical positions. The title text jokes that there is a set of gears on said mechanism that is used to predict the popularity of \"skinny jeans\" and \"low-rise waists.\" Since it was likely created in the 1st or 2nd century B.C., it is impossible for the creators to have had any knowledge of skinny jeans or low-rise waists - both are modern-day clothing fashions.\n\n==Transcript==\n{{incomplete transcript|Do NOT delete this tag too soon.}}\n\n:Understanding lunar cycles\n\n:Nodal precession\n:[A diagram showing a broad cosine-like wave with wavelength labelled as 18.6 years. To the right are two diagrams showing an orbital cycle moving in and out of plane.]\n\n:Apsidal precession\n:[A diagram similar to the one above but with a slightly shorter wavelength, labelled as 8.9 years. To the right are two diagrams showing an elliptical orbit around a planet and the same orbit rotated.]\n\n:Phase\n:[A diagram similar to those above with a shorter wavelength, labelled as 29.5 days. To the right is a diagram showing four phases of the moon: New, Waxing crescent, Waxinf gibbos, Full.]\n\n:Distance\n:[A diagram similar to those above with a shorter wavelength, labelled as 27.5 days. To the right is a diagram showing the distance of the moon from the Earth over time, with distances marked by arrows.]\n\n:Earth-Moon relative size\n:[A wave with long wavelength with an arrow pointing to the minimum labelled 'Earth bigger' and an arrow pointing to the maximum labelled 'Moon bigger'. To the right are two diagrams of the moon and Earth, one showing the Earth bigger than the Moon and the other showing the Moon bigger than the Earth.]\n\n:Lunar shape\n:[A wave with long wavelength with an arrow pointing to the minimum labelled 'Circle' and an arrow pointing to the maximum labelled 'Square'. To the right is a diagram showing a circle, a circle transforming into a square with outward arrows at each corner and a square transforming into a circle with inward arrows.]\n\n:Lunar mood\n:[A wave with long wavelength with an arrow pointing to the minimum labelled 'Bad' and an arrow pointing to the maximum labelled 'Good'. To the right are four emojis: :), :|, :(, :|]\n\n:[A superimposed graph of all the above waves. Different points on the graph are labelled: Harvest moon, Supermoon, Blue moon, Skinny Jeans popular, Super blood moon, Golden age of TV, Dire moon, Pork moon, Two week window in which astrology works, Total eclipse of the sea.]\n\n\n\n{{comic discussion}}"
}
}
}
我自己今天也在想这个问题，毫不奇怪，有人以 xkcd explainer Chrome extension. Specifically, the repository that houses the code for the extension has a parser.js file (i.e., the hard work that has been done for us) and a main.js 文件的形式为我们完成了大部分艰苦的工作，该文件是在考虑浏览器的情况下构建的，但其逻辑和功能可以很容易被抽象出来仍然尊重主要目标和在不同的环境中（例如，Node.js）：以易于使用的方式获取 XKCD 漫画的解释。
下面的代码片段包含我的 reworking/merging 的 parser.js 和 main.js 文件链接到上面。可以直接在浏览器控制台中复制并粘贴合适的代码块以查看效果：
上面的例子是针对下面代码中 loadExplain(74) 给出的 comic 74。只需将 loadExplain(num) 中的 num 更改为您想要解释 HTML 的漫画编号或 loadExplain() 为最新漫画。
// parser.js
let comicid = 0;
let refNum = 0;
let refs = [];
function wikiparse(wikitext, num){
comicid = num;
let lines = wikitext.split(/\r?\n/);
let html = "";
let bulletLevel = 0; //level of bullet points
let quotes = 0; //previous line was quote
let tablerow = false; //true if currently in table row
for(let i = 0; i < lines.length; i++){
let line = lines[i];
if(line !== ""){
line = convertLine(line); //perform simple inline parsing
if(line[0] === "*"){ //bullet points
let bulletNum = line.match(/^\*+/)[0].length; //number of * in front of string
line = "<li>" + line.replace(/^\*+ */, "") + "</li>";
if(bulletLevel < bulletNum){ //start of new level of bulleting
line = "<ul>" + line;
bulletLevel++;
}
else if(bulletLevel > bulletNum){ //end of level
line = "</ul>" + line;
bulletLevel--;
}
}
else if(bulletLevel > 0){ //end of bulleting
line = "</ul><p>" + line + "</p>";
bulletLevel--;
}
else if(line[0] === ":"){ //quotes
line = "<dd>" + line.substring(1) + "</dd>";
if(!quotes){ //start of quote
line = "<dl>" + line;
quotes = 1;
}
}
else if(quotes){ //end of quote
line = "</dl><p>" + line + "</p>";
quotes = 0;
}
else if(line[0] === '{' && line[1] === '|'){ //tables
line = "<table " + line.substring(2) + ">";
}
else if(line[0] === '|' && line[1] == '-'){ //start of table row
line = "";
tablerow = true;
}
else if(line[0] === '|' && line[1] === '}'){ //end of table
line = "</table>"; //no rows?
tablerow = false;
}
else if(line[0] === '!'){ //table heading
line = "<th>" + line.substring(1).replace(/!!/g, "</th><th>") + "</th>";
if(tablerow){
line = "<tr>" + line + "</tr>";
tablerow = false;
}
}
else if(line[0] === '|'){ //table cell
line = "<td>" + line.substring(1).replace(/\|\|/g, "</td><td>") + "</td>";
if(tablerow){
line = "<tr>" + line + "</tr>";
tablerow = false;
}
}
else line = "<p>" + line + "</p>"; //regular text
html += line;
}
}
if(refNum > 0) {
let refFormatted = "<div class='references'><ol>";
for(let i = 0; i < refs.length; i++) {
refFormatted += "<li id='note-" + i + "'><a href='#ref-" + i + "'>↑</a><span>" + refs[i] + "</span></li>";
}
refFormatted += "</ol></div>";
html += refFormatted;
}
return html;
}
function convertLine(line){ //replace simple inline wiki markup
//headings and subheadings
//format ==<text>== -> <h2>, ===<text>=== -> h3, etc.
if(line[0] === '=' && line[line.length - 1] === '='){
let headingLeft = line.match(/^=+/)[0].length; //number of '='s on the left
let headingRight = line.match(/=+$/)[0].length; //number of '='s on the right
let headingNum = Math.min(headingLeft, headingRight);
if(headingNum >= 1 && headingNum <= 6){
line = "<h" + headingNum + ">" + line.substring(headingNum, line.length - headingNum) + "</h" + headingNum + ">";
}
}
//link to another xkcd comic
//format: [[<id>: <title]] or [[<id>: <title>|<id>]]
line = line.replace(/\[\[([0-9]+): [^\]]+(|)?\]\]/g, convertComicLink);
//link to within explain page
//format: [[#<heading>|<display>]]
line = line.replace(/\[\[#[^\]]+\]\]/g, convertHeadingLink);
//internal links
//format: [[<target>]] or [[<target>|<display>]]
line = line.replace(/\[\[[^\]]+\]\]/g, convertInternalLink);
// citation needed
//format: {{Citation needed}}
line = line.replace(/{{Citation needed}}/g, convertCitationLink);
//what if links
//format: {{what if|<id>|<title>}}
line = line.replace(/{{what if(\|[^\|]+){1,2}}}/g, convertWhatIfLink);
//wikipedia links
//format: {{w|<target>}} or {{w|<target>|<display>}} (or W)
line = line.replace(/{{[wW](\|[^}]+){1,2}}}/g, convertWikiLink);
//tvtropes links
//format: {{tvtropes|<target>|<display>}}
line = line.replace(/{{tvtropes(\|[^}]+){2}}}/g, convertTropesLink);
//other external links
//format: [http://<url>] or [http://<url> <display>] (includes https)
line = line.replace(/\[((http|https):)?\/\/([^\]])+]/g, convertOtherLink);
//references
line = line.replace(/<ref>.+<\/ref>/g, convertRefLink);
//bold
//format: '''<text>'''
line = line.replace(/'''(?:(?!''').)+'''/g, convertBold);
//italics
//format: ''<text>'' or ''<text>
line = line.replace(/''[^('')\n]+''/g, convertItalics)
.replace(/''.+/g, convertItalics);
return line;
}
function convertComicLink(link){
let firstSep = link.indexOf(":");
let secondSep = link.indexOf("|");
let id = link.substring(2, firstSep);
let display = "";
if(secondSep === -1) {
let title = link.substring(firstSep + 2, link.length - 2);
display = id + ": " + title;
}
else {
display = link.substring(secondSep + 1, link.length - 2);
}
return '<a href="https://xkcd.com/' + id + '">' + display + '</a>';
}
function convertHeadingLink(link){
let target = link.substring(3, link.length-2);
let display = "";
let separator = target.indexOf("|");
if(separator === -1){
display = target;
}
else{
display = target.substring(separator + 1);
target = target.substring(0, separator);
}
return '<a href="http://www.explainxkcd.com/' + comicid + '#' + encodeURIComponent(target) + '" title="' + target + '">' + display + '</a>';
}
function convertInternalLink(link){
let target = link.substring(2, link.length-2);
let display = "";
let separator = target.indexOf("|");
if(separator === -1){
display = target;
}
else{
display = target.substring(separator + 1);
target = target.substring(0, separator);
}
return '<a href="http://www.explainxkcd.com/wiki/index.php/' + encodeURIComponent(target) + '" title="' + target + '">' + display + '</a>';
}
function convertCitationLink(){
return '<sup>[<a href="/285" title="285" class="mw-redirect"><i>citation needed</i></a>]</sup>';
}
function convertWhatIfLink(link){
let firstSep = link.indexOf("|") + 1;
let secondSep = link.indexOf("|", firstSep);
let id = link.substring(firstSep, secondSep);
let title = link.substring(secondSep + 1, link.length - 2);
return '<a rel="nofollow" href="http://what-if.xkcd.com/' + id + '">' + title + '</a>';
}
function convertWikiLink(link){
let target = link.substring(4, link.length-2);
let display = "";
let separator = target.indexOf("|");
if(separator === -1){
display = target;
}
else{
display = target.substring(separator + 1);
target = target.substring(0, separator);
}
return '<a href="http://en.wikipedia.org/wiki/' + encodeURIComponent(target) + '" title="wikipedia:' + target + '">' + display + '</a>';
}
function convertTropesLink(link){
let firstSep = link.indexOf("|") + 1;
let secondSep = link.indexOf("|", firstSep);
let target = link.substring(firstSep, secondSep);
let display = link.substring(secondSep + 1, link.length - 2);
return '<a rel="nofollow" class="external text" href="http://tvtropes.org/pmwiki/pmwiki.php/Main/' + target + '">' +
'<span style="background: #eef;" title="Warning: TV Tropes. See comic 609.">' + display + '</span>' +
'</a>';
}
function convertOtherLink(link){
let separator = link.indexOf(" ");
let target = "";
let display = "";
if(separator === -1){
target = link.substring(1, link.length - 1);
display = "[X]";
}
else{
target = link.substring(1, separator);
display = link.substring(separator + 1, link.length - 1);
}
return '<a rel="nofollow" href="' + encodeURI(target) + '">' + display + '</a>';
}
function convertRefLink(link) {
let display = link.substring(5, link.length - 6);
refNum++;
refs.push(display);
return "<sup id='ref-" + (refNum - 1) + "'><a href='#note-" + (refNum - 1) + "'>[" + refNum + "]</a></sup>";
}
function convertBold(text){
return "<b>" + text.substring(3, text.length - 3) + "</b>";
}
function convertItalics(text){
if(text.substr(-2) === "''") {
return "<i>" + text.substring(2, text.length - 2) + "</i>";
}
return "<i>" + text.substring(2) + "</i>";
}
// main.js
async function getJSON(url, callback){
const response = await fetch(url);
const responseJSON = await response.json()
callback(responseJSON);
}
async function loadExplain(comic = ''){
if (comic === '') {
let latestComic = await fetch("https://explainxkcd.com/wiki/api.php?action=expandtemplates&format=json&origin=*&text={{LATESTCOMIC}}");
latestComicJSON = await latestComic.json();
comic = +latestComicJSON.expandtemplates['*'];
}
getJSON("https://explainxkcd.com/wiki/api.php?action=query&prop=revisions&rvprop=content&format=json&origin=*&redirects=1&titles=" + comic, function(obj){
let pages = obj.query.pages;
let page = pages[Object.keys(pages)[0]].revisions[0]["*"];
let start = page.indexOf("{{incomplete|");
if(start === -1){ //incomplete tag at the beginning of explanation
start = page.indexOf("== Explanation ==") + 18;
if(start === -1 + 18){
start = page.indexOf("==Explanation==") + 16;
}
if(page[start] == "\n") start++;
}
else{ //complete explanation
start = page.indexOf("\n", start) + 1;
}
let end = page.indexOf("==Transcript==") - 1;
if(end === -1 - 1){
end = page.indexOf("== Transcript ==") - 1;
}
let rawExplain = page.substring(start, end);
let explanation = wikiparse(rawExplain, comic);
let readMore = '<p><b>Read more at the <a href="http://explainxkcd.com/' + comic + '">explain xkcd wiki</a>.</b></p>';
console.log(explanation, readMore);
});
}
// get parsed explanation HTML
// loadExplain(); // for most recent comic
loadExplain(74) // for custom comic (1 - 2296 as of this answer posting)