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/'个链接，这些链接会将我重定向到我自己的网址。

如何绕过此功能，在新标签页上重定向到wikipage，还是可以在保留布局/图像的同时删除所有链接？

Answer 1

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

该指令将从wikipedia api响应中获取html字符串，将它们加载到元素中，查找和替换相对URL以及wikipedia base 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 2

您可以使用PS SQLSERVER:\> Invoke-SQLBackup -ServerInstance 'SERVERNAME\INSTANCENAME' -DatabaseName 'TestDatabase' -BackupFile 'C:\SomePath\Filename.bak' WARNING: The names of some imported commands from the module 'SQLPS' include unapproved verbs that might make them less discoverable. To find the commands with unapproved verbs, run the Import-Module command again with the Verbose parameter. For a list of approved verbs, type Get-Verb. VERBOSE: Performing the operation "Backup-SqlDatabase" on target "[SERVERNAME\INSTANCENAME]". VERBOSE: BACKUP DATABASE [KB] TO DISK = N'C:\SomePath\FileName.bak' WITH NOFORMAT, NOINIT, NOSKIP, REWIND, NOUNLOAD, STATS = 10 VERBOSE: 10 percent processed. VERBOSE: 21 percent processed. VERBOSE: 32 percent processed. VERBOSE: 40 percent processed. VERBOSE: 51 percent processed. VERBOSE: 61 percent processed. VERBOSE: 72 percent processed. VERBOSE: 80 percent processed. VERBOSE: 91 percent processed. VERBOSE: Processed 296 pages for database 'DatabaseTest', file 'DatabaseTest' on file 4. VERBOSE: 100 percent processed. VERBOSE: Processed 2 pages for database 'DatabaseTest', file 'DatabaseTest_log' on file 4. VERBOSE: BACKUP DATABASE successfully processed 298 pages in 0.217 seconds (10.728 MB/sec).操纵html并调整生成的dom节点的angular.element()，然后在传递给视图之前返回到字符串：

href

请注意，许多href都是页内ID的哈希值。不知道你想用那些

做什么

应该使用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(); });和ng-bind-html并且不要在控制器中进行任何dom操作

ngSanitze

的 DEMO

Answer 3

用absoluteUrls替换所有相对网址，

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

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

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

3 个答案:

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