Removing '<and text within those>' from a string in javascript

Question

I'm receiving an array of strings from a REST api call, and the strings have some html tags in them, for example:

Bard's opponents can also travel through his Magical Journey doorways. You can follow him, if you think it's safe.</li>

You can crush Bard's healing shrines just by walking over them. Don't let his allies take them without a fight.

Bard's ultimate, Tempered Fate, affects allies, enemies, monsters, and turrets alike. Sometimes it can be to your advantage to jump into it!</li>

Each line is a string, and two of them have an </li> tag at the end.

I tried writing a function that receives such an array, and returns a corrected array. Problem is, when I use it, the console in my website shows some weird errors with the strings from the array, and I've realized my function was the cause.

That is the function:

modal.removeBracketsFromArray = function (array) {
    if (array == undefined)
        return array;

    function removeBracketsText(text) {
        return text.replace(/<[^>]*>/g, '')
    };

    var newArray = [];
    for (var i = 0; i < array.length; i++) {
        newArray.push(removeBracketsText(array[i]));
    }

    return newArray;
 };

It seems to do the work, but it somewhy messes up when using it in an ng-repeat attribute.

This is an use example:

<champion-ally-enemy-tips allytips="modalCtrl.removeBracketsFromArray(modalCtrl.champ.allytips)"
                          enemytips="modalCtrl.removeBracketsFromArray(modalCtrl.champ.enemytips)">
</champion-ally-enemy-tips>

which then moves to:

<ul>
    <li ng-repeat="enemytip in enemytips"><h6>{{enemytip}}</h6></li>
</ul>

When I remove the method call (like so), it doesn't show an error, but the tags remain:

<champion-ally-enemy-tips allytips="modalCtrl.champ.allytips"
                          enemytips="modalCtrl.champ.enemytips">
</champion-ally-enemy-tips>

Is my function doing something weird without realizing it? thanks for helping

This is a pastebin of the errors I receive: LINK

Out of curiosity, you're doing a website about league of legends :P ? — Andrew Donovan
– Andrew Donovan, Commented May 12, 2016 at 19:06
Definitly :P Wanted to learn angular, and have seen riot api website for several times, thought it'd be nicer to show teemo over some weather api stuff :P — Giora Guttsait
– Giora Guttsait, Commented May 12, 2016 at 19:08
Do you by chance have angular unminified version? Maybe that error will be clearer. Also do you have the champion-ally-enemy-tips component we can see? — aug
– aug, Commented May 12, 2016 at 19:19

Lex · Accepted Answer · 2016-05-12 19:20:36Z

2

Instead of messing with the array, how about creating a custom filter to strip out the HTML on display?

.filter('removeHTML', function() {
    return function(input) {
        return input.replace(/<[^>]*>/g, '');
    }
})

Then change your display inside the ng-repeat to:

<h6>{{enemytip | removeHTML}}</h6>

answered May 12, 2016 at 19:20

Lex

7,2732 gold badges31 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Giora Guttsait Over a year ago

Nice idea! didn't think if it. Let me check it out and return an answer

Giora Guttsait Over a year ago

Beautiful, works and there's no error. Thanks a lot! :)

Lex Over a year ago

Glad I could help. :)

Collectives™ on Stack Overflow

Removing '<and text within those>' from a string in javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related