angular:过滤以替换和完成相对的路径

时间:2022-12-02 15:59:05

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

我是棱角分明的新手,我正努力在文本中替换相对的href路径。

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

例如,我有以下控制器/范围/ html /过滤器:

$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):

我尝试创建一个搜索所有相对网址的过滤器,并替换为完整路径网址(例如: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;
    };

})

However, my filter replace only the first case (http://www.example.com/shoes/sport) for each pattern.

但是,我的过滤器仅替换每个模式的第一个案例(http://www.example.com/shoes/sport)。

Does anyone know how I can make it work fine and replace for all matches and patterns OR is there any other clever/smarter way to get what I need?

有谁知道我怎么能使它工作正常并取代所有的比赛和模式或有没有任何其他聪明/更聪明的方式来获得我需要的东西?

PS: this angular project is an Ionic platform (mobile app) and I'm retrieving data (text + links) from a database that is shared with a desktop version (php), which usually inserts these relative paths. Thus I need to complete them, otherwise many links will be broken in my mobile app.

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

Thanks for any help!

谢谢你的帮助!

1 个解决方案

#1


2  

You can try using a regular expression. Something like that:

您可以尝试使用正则表达式。像这样的东西:

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/");

The 'g' in regular expressions is a global replace.

正则表达式中的'g'是全局替换。

#1


2  

You can try using a regular expression. Something like that:

您可以尝试使用正则表达式。像这样的东西:

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/");

The 'g' in regular expressions is a global replace.

正则表达式中的'g'是全局替换。