Skip to content

Instantly share code, notes, and snippets.

@MrPawanMall

MrPawanMall/Search Article on Wikipedia via Wikipedia Search API.html

Last active February 23, 2021 11:51
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save MrPawanMall/f7029ee2ca058612e2b67425584aad90 to your computer and use it in GitHub Desktop.
Save MrPawanMall/f7029ee2ca058612e2b67425584aad90 to your computer and use it in GitHub Desktop.
Download ZIP
I used a API from Wikipedia API and created a simple wikipedia article scrapper by using html & jQuery(Ajax). Hope you like "Search Article on Wikipedia via Wikipedia Search API"
Raw
Search Article on Wikipedia via Wikipedia Search API.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Search Article on Wikipedia via Wikipedia Search API</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<h1 class="p-5 alert alert-dark text-center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Wikipedia-logo-v2.svg/225px-Wikipedia-logo-v2.svg.png" style="width:100px" />
<p>Search Article on Wikipedia via Wikipedia Search API</p>
</h1>
<div class="mt-2 p-5">
<div class="row pb-4">
<div class="col-md-10">
<input type="text" id="sTerm" class="form-control" placeholder="Type here to search an article on wikipedia... By Pawan Mall | www.pawanmall.net">
</div>
<div class="col-md-2">
<button type="button" id="searchArticle" class="btn btn-primary btn-block">Search</button>
</div>
</div>
<div id="resultArea" class="form-control border-0" contenteditable="false"></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script>
// Created By Pawan Mall | www.pawanmall.net
$(document).ready(function() {
$('#sTerm').focus();
$('#resultArea').hide();
$('#searchArticle').on('click', function() {
$('#resultArea').show();
searchTerm = $('#sTerm').val();
let surl = 'https://en.wikipedia.org/w/api.php?action=query&prop=extracts&origin=*&format=json&generator=search&gsrnamespace=0&gsrlimit=1&gsrsearch=' + searchTerm;
$.ajax({
url: surl,
header: {
'Access-Control-Allow-Origin' : '*',
'Content-Type': 'application/json'
},
method: 'GET',
dataType: 'jsonp',
data: '',
beforeSend: function(){
// $("#loader").show();
$('#resultArea').html('<div class="text-center"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: #fff; display: block;" width="25%" height="25%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><g transform="translate(50 50)"><g transform="scale(0.7)"><g transform="translate(-50 -50)"><g transform="translate(-3.20642 -20)"><animateTransform attributeName="transform" type="translate" repeatCount="indefinite" dur="1s" values="-20 -20;20 -20;0 20;-20 -20" keyTimes="0;0.33;0.66;1"></animateTransform><path fill="#5699d2" d="M44.19 26.158c-4.817 0-9.345 1.876-12.751 5.282c-3.406 3.406-5.282 7.934-5.282 12.751 c0 4.817 1.876 9.345 5.282 12.751c3.406 3.406 7.934 5.282 12.751 5.282s9.345-1.876 12.751-5.282 c3.406-3.406 5.282-7.934 5.282-12.751c0-4.817-1.876-9.345-5.282-12.751C53.536 28.033 49.007 26.158 44.19 26.158z"></path><path fill="#1d3f72" d="M78.712 72.492L67.593 61.373l-3.475-3.475c1.621-2.352 2.779-4.926 3.475-7.596c1.044-4.008 1.044-8.23 0-12.238 c-1.048-4.022-3.146-7.827-6.297-10.979C56.572 22.362 50.381 20 44.19 20C38 20 31.809 22.362 27.085 27.085 c-9.447 9.447-9.447 24.763 0 34.21C31.809 66.019 38 68.381 44.19 68.381c4.798 0 9.593-1.425 13.708-4.262l9.695 9.695 l4.899 4.899C73.351 79.571 74.476 80 75.602 80s2.251-0.429 3.11-1.288C80.429 76.994 80.429 74.209 78.712 72.492z M56.942 56.942 c-3.406 3.406-7.934 5.282-12.751 5.282s-9.345-1.876-12.751-5.282c-3.406-3.406-5.282-7.934-5.282-12.751 c0-4.817 1.876-9.345 5.282-12.751c3.406-3.406 7.934-5.282 12.751-5.282c4.817 0 9.345 1.876 12.751 5.282 c3.406 3.406 5.282 7.934 5.282 12.751C62.223 49.007 60.347 53.536 56.942 56.942z"></path></g></g></g></g></svg></div>')
},
success: function(data){
// console.log(data.query.pages);
dataNum = Object.keys(data.query.pages)[0];
$('#resultArea').empty();
let newTitle = '<h1 class="alert alert-info text-center"><strong>'+data.query.pages[dataNum].title+'</strong></h1>';
$('#resultArea').html(`${newTitle}<div>${data.query.pages[dataNum].extract}</div>`);
console.log(data);
},
complete: function(){
$('#sTerm').val('');
$('#sTerm').focus();
}
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment