维基百科 api - 相对 URL |删除或重定向链接

Question

目前我一直在使用以下请求在我的 AngularJS 应用程序上显示维基百科内容：

https://en.wikipedia.org/w/api.php?action=parse&format=json&callback=JSON_CALLBACK&page=little%20tinamou

使用以下内容，我在页面上显示所有文本：

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;
    });

显示所有图片、外部链接，但在 html 中您可以看到该页面有很多 '/wiki/' 链接，这些链接将我重定向到我自己的 url。

我该如何绕过这个，在新标签页上重定向到维基页面，或者我可以简单地删除所有链接，同时保留 layout/images？

Answer 1

将所有相对 url 替换为 absoluteUrls，

示例：将 /wiki/File:Crypturellus_soui.jpg 替换为 https://en.wikipedia.org/wiki/File:Crypturellus_soui.jpg

注意：这应该会在当前浏览器选项卡中打开维基百科页面中的图像。

Answer 2

由于 angular 已嵌入 jquery 功能，如 angular.element，您可以将所有 html 操作包装在自定义指令中。

该指令将从维基百科 api 响应中获取 html 字符串，将它们加载到一个元素中，查找并替换相对 urls 和维基百科基础 url 并将结果存储在指令的元素上。

在线演示 - 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

您可以使用 angular.element() 操作 html 并调整结果 dom 节点的 href 然后 return 在传递到视图之前调整为字符串：

 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();

  });

请注意，许多 href 是页内 ID 的哈希值。不确定你想用这些做什么

应将 ng-bind-html 与 ngSanitze 一起使用，并且不要在控制器中进行任何 dom 操作

<div ng-bind-html="html">

DEMO

维基百科 api - 相对 URL |删除或重定向链接

wikipedia api - relative urls | remove or redirect links

wikipedia-api

angularjs

在线演示 - https://plnkr.co/edit/0wtFVOhxw0NfRw43x8K6?p=preview