Question

I'm new to angular and I'm struggling to replace relative href paths inside my text.

For example purposes, I have the following controller/scope/html/filter:

$scope.text = 'Here you can find the best <a href="/shoes/sport">sport shoes</a>, <a href="/shoes/classic">classic shoes</a> and <a href="/socks/sale">socks</a>. If not, you can <a href="http://www.google.com">google</a> it.';

<p ng-bind-html="text | parseUrlFilter"></p>

I tried to create a filter that search for all relative urls and replace with the complete path url (eg: http://www.example.com/shoes/sport，http://www.example.com/shoes/classic，http://www.example.com/socks/sale）：

app.filter('parseUrlFilter', function() {

    var urlPattern1 = 'href="/shoes/';
    var urlPattern2 = 'href="/socks/';

    return function(text) {


            angular.forEach(text.match(urlPattern1), function(url) {
                url = url.replace('href="','');
                text = text.replace(url, 'http://www.example.com' + url);
            });

            angular.forEach(text.match(urlPattern2), function(url) {
                url = url.replace('href="','');
                text = text.replace(url, 'http://www.example.com' + url);
            });

        return text;
    };

})

但是，我的过滤器仅替换每种模式的第一种情况（http://www.example.com/shoes/sport）。

有谁知道如何让它工作正常并替换所有匹配和模式还是有其他聪明/更聪明的方式来获得我需要的东西吗？

PS：这个角度项目是一个离子平台（移动应用程序），我正在从与桌面版本（php）共享的数据库中检索数据（文本+链接），这通常会插入这些相对路径。因此，我需要完成它们，否则许多链接将在我的移动应用程序中被破坏。

感谢您的帮助！

Answer 1

您可以尝试使用正则表达式。这样的事情：

var str = 'Here you can find the best <a href="/shoes/sport">sport shoes</a>, <a href="/shoes/classic">classic shoes</a> and <a href="/socks/sale">socks</a>. If not, you can <a href="http://www.google.com">google</a> it.';
var res = str.replace(/href=\"\//g, "href=\"http://www.example.com/");

＆＃39;＆＃39;＆＃39;在正则表达式中是全局替换。

angular：过滤以替换并完成相对<a href="/"> paths

1 个答案: