wikipedia api - relative urls | remove or redirect links - angularjs

Question

Currently I've been using the following request to display the Wikipedia content on my AngularJS app:
https://en.wikipedia.org/w/api.php?action=parse&format=json&callback=JSON_CALLBACK&page=little%20tinamou
Using the following, I display all the text on the page:
var lowercaseBirdname = $filter('lowercase')($scope.birdname);
console.log(lowercaseBirdname);
birdApi.getWikipedia(lowercaseBirdname)
.then(function(res) {
console.log(res.data.parse.text['*']);
var toHtml = res.data.parse.text['*'];
document.getElementById("extract").innerHTML = toHtml;
});
All the images, external links are showing, though in the html you can see that the page has alot of '/wiki/' links which redirects me to my own url.
How do I bypass this, do give a redirect to the wikipage on a new tab, or can I simply remove all the links while keeping the layout/images?

Answer 1

You can manipulate the html using angular.element() and adjust the href of resultant dom nodes then return to string before passing to the view:
var url = 'https://en.wikipedia.org/w/api.php?action=parse&format=json&callback=JSON_CALLBACK&page=little%20tinamou',
wikiBaseUrl = "http://en.wikipedia.org";
$http.jsonp(url).then(function(resp){
var html = resp.data.parse.text['*'];
// create a div and append html data
var div = angular.element('<div>').append(html),
// create collection of the `<a>` elements
links = div.find('a');
// loop over `<a>` elements and adjust href
for(var i =0; i<links.length; i++ ){
var el = links[i];
var $link =angular.element(el) , href = $link.attr('href');
if(href[0] ==='/'){
// set absolute URL.
$link.attr('href', wikiBaseUrl + href)
}
}
// return the modified html string from the div element
$scope.html = div.html();
});
Note that many of the href are hashes for in-page ID. Not sure what you want to do with those
Should use ng-bind-html along with ngSanitze and not do any dom manipulation in controllers
<div ng-bind-html="html">
DEMO

Answer 2

Since angular has embedded jquery functionality as angular.element, you can do and wrap all the html manipulation in a custom directive.
This directive will get the html string from wikipedia api response, load them into an element, lookup and replace for relative urls and with wikipedia base url and will store the result on the directive's element.
Online demo - https://plnkr.co/edit/0wtFVOhxw0NfRw43x8K6?p=preview
html:
<button ng-click="reload()">Reload</button>
<hr>
<div wikipedia-content="getWikipediaContent()"></div>
javascript:
var app = angular.module('plunker', []);
var WIKIPEDIA_BASE_URL = 'http://en.wikipedia.org';
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.reload = function() {
// hard coded for testing purposes
$scope.response = {
"parse": {
"title": "Little tinamou",
"pageid": 805527,
"revid": 697345219,
"text": {
"*": "<div>\n<table cl ... "
}
}
};
};
$scope.getWikipediaContent = function getWikipediaContent() {
if (!$scope.response) {
return '';
}
return $scope.response.parse.text['*']
};
});
app.directive("wikipediaContent", function() {
return {
scope: {
wikipediaContent: '='
},
link: function(scope, directiveElement) {
scope.$watch('wikipediaContent', function() {
if (!scope.wikipediaContent) {
return;
}
var wikipediaElement = angular.element(scope.wikipediaContent);
wikipediaElement.find('a').each(function() {
var element = angular.element(this);
var href = element.attr('href');
if (href.match(/^http/)) {
return;
}
element.attr('href', WIKIPEDIA_BASE_URL + href);
});
directiveElement.replaceWith(wikipediaElement);
});
}
}
});
https://plnkr.co/edit/0wtFVOhxw0NfRw43x8K6?p=preview

Answer 3

Replace all the relative urls with absoluteUrls,
example: replace /wiki/File:Crypturellus_soui.jpg with https://en.wikipedia.org/wiki/File:Crypturellus_soui.jpg
NOTE: This should open the image in wikipedia page in current browser tab.