Question

我有一个网页，要求用户提供一段文字，然后对其进行一些操作。为了向懒惰的用户演示，我想添加一个“我感觉很幸运”的按钮，它将从维基百科中获取一些随机文本并填充输入。

如何使用Javascript从随机的维基百科文章中获取文本序列？

我使用fetching找到了parsing和Wikipedia API篇文章的一些示例，但它们往往是服务器端。我正在寻找一种完全由客户端运行的解决方案，而不会被same origin policy打破。

注意随机乱码是不够的;我需要有意义的人类可读句子。

Answer 1

我的答案建立在suggested here技术的基础上。

棘手的部分是制定正确的查询字符串：

http://en.wikipedia.org/w/api.php?action=query&generator=random&prop=extracts&exchars=500&format=json&callback=onWikipedia

generator=random选择随机页面
prop=extracts和exchars=500检索500个字符的摘录
format=json返回JSON格式的数据
callback=会将数据包装在函数调用中，因此可以将其视为任何其他<script>并注入您的页面（请参阅JSONP），从而绕过跨域障碍。
requestid，每次都添加一个新值，以避免浏览器缓存过时（IE9中需要）

查询提供的页面看起来像这样（我添加了空白以便于阅读）：

onWikipedia(
  {"query":
    {"pages":
      {"12362520":
        {"pageid":12362520,
         "ns":0,
         "title":"Power Building",
         "extract":"<p>The <b>Power Building<\/b> is a historic commercial building in
                    the downtown of Cincinnati, Ohio, United States. Built in 1903, it
                    was designed by Harry Hake. It was listed on the National Register
                    of Historic Places on March 5, 1999. One week later, a group of
                    buildings in the northeastern section of downtown was named a
                    historic district, the Cincinnati East Manufacturing and Warehouse
                    District; the Power Building is one of the district's contributing
                    properties.<\/p>\n<h2> Notes<\/h2>"
  } } } }
)

当然，每次都会收到不同的文章。

这是一个完整的，有效的示例，您可以在JSBin上 try out 。

<HTML><BODY>

  <p><textarea id="textbox" style="width:350px; height:150px"></textarea></p>
  <p><button type="button" id="button" onclick="startFetch(100, 500)">
    Fetch random Wikipedia extract</button></p>

  <script type="text/javascript">

    var textbox = document.getElementById("textbox");
    var button = document.getElementById("button");
    var tempscript = null, minchars, maxchars, attempts;

    function startFetch(minimumCharacters, maximumCharacters, isRetry) {
      if (tempscript) return; // a fetch is already in progress
      if (!isRetry) {
        attempts = 0;
        minchars = minimumCharacters; // save params in case retry needed
        maxchars = maximumCharacters;
        button.disabled = true;
        button.style.cursor = "wait";
      }
      tempscript = document.createElement("script");
      tempscript.type = "text/javascript";
      tempscript.id = "tempscript";
      tempscript.src = "http://en.wikipedia.org/w/api.php"
        + "?action=query&generator=random&prop=extracts"
        + "&exchars="+maxchars+"&format=json&callback=onFetchComplete&requestid="
        + Math.floor(Math.random()*999999).toString();
      document.body.appendChild(tempscript);
      // onFetchComplete invoked when finished
    }

    function onFetchComplete(data) {
      document.body.removeChild(tempscript);
      tempscript = null
      var s = getFirstProp(data.query.pages).extract;
      s = htmlDecode(stripTags(s));
      if (s.length > minchars || attempts++ > 5) {
        textbox.value = s;
        button.disabled = false;
        button.style.cursor = "auto";
      } else {
        startFetch(0, 0, true); // retry
      }
    }

    function getFirstProp(obj) {
      for (var i in obj) return obj[i];
    }

    // This next bit borrowed from Prototype / hacked together
    // You may want to replace with something more robust
    function stripTags(s) {
      return s.replace(/<\w+(\s+("[^"]*"|'[^']*'|[^>])+)?>|<\/\w+>/gi, "");
    }
    function htmlDecode(input){
      var e = document.createElement("div");
      e.innerHTML = input;
      return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
    }

  </script>

</BODY></HTML>

generator=random的一个缺点是，您经常会收到不是实际文章的谈话页面或生成的内容。如果任何人都可以改进查询字符串以将其限制为高质量的文章，那就太棒了！

从维基百科中获取随机摘录（Javascript，仅限客户端）

1 个答案: