How to exclude empty spaces when counting length in Angular? - angularjs

Question

I am checking the length of a title and setting a class, based on that length. I noticed though, that the length is also checking the empty spaces, so when you have a space, it would count as +1.
I want to get rid of that. So I want to exclude the count of empty spaces in the length. How can I do it, if it's possible?
<h1 ng-class="{'specific-class': title.name.length >= 10}">{{title.name}}</h1>

Answer 1

You could check this by replacing the spaces with empty strings:
title.name.replace(' ','').length >= 10
The full line would be:
<h1 ng-class="{'specific-class': title.name.replace(' ','').length >= 10}">{{title.name}}</h1>
Say if title.name was 'Hello World!', title.name.length would be 12, but title.name.replace(' ','').length is 11.
EDIT
Turns out you can't use slashes inside HTML or Angular will convert them to html-safe characters. I'd suggest therefore to separate the checker out into its own module. I've attached a snippet so you can see how it's done:
angular
.module("app", [])
.controller("test", function($scope) {
// Example title object. Just load title objects as you would normally.
$scope.title = {name: 'The World of McNamara'};
// The actual magic happens here:
$scope.checker = function(word) {
return word.replace(/\s/g, '').length >= 10;
}
})
.specific-class {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- snippet checks whatever is passed to it as title.name -->
<div ng-app="app" ng-controller="test">
<h1 ng-class="{'specific-class': checker(title.name)}">{{title.name}}</h1>
</div>

Answer 2

You could do in multiple ways to remove empty spaces from the string like using split and then join.
title.name.split(' ').join('')
Or could be done by regex approach:
title.name.replace(/ /g, '')
It is up to you how you want to implement.

Answer 3

You would have to use .trim :
title.name.trim().length
Or you could do :
title.name.replace(" ", "").length
EDIT :
In your code it would be like so :
<h1 ng-class="{'specific-class': title.name.replace(' ', '').length >= 10}">{{title.name}}</h1>
Using ternary logic :
<h1 ng-class="(title.name.replace(' ', '').length >= 10)? 'specific-class' : 'another-class' ">{{title.name}}</h1>