Borni Borni - 2 years ago 126
AngularJS Question

wikipedia api - relative urls | remove or redirect links

Currently I've been using the following request to display the wikipedia content on my angularjs app:

Using the following, I display all the text on the page:

var lowercaseBirdname = $filter('lowercase')($scope.birdname);
.then(function(res) {
var toHtml =['*'];
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
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 Source

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 -


<button ng-click="reload()">Reload</button>
<div wikipedia-content="getWikipediaContent()"></div>


var app = angular.module('plunker', []);


app.controller('MainCtrl', function($scope) {
  $ = '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) {

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

          element.attr('href', WIKIPEDIA_BASE_URL + href);



Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download