Adding an "and" to the last word in String - js/Angular

Question

I have this solved, but I am looking to see if there is a better way to do this. Fiddle - https://jsfiddle.net/143h9wrq/ So what I do is check to see if there are 2+ Ids, then turn the string into an array, take the last array item and add 'and ', put it back together and display it.

I am looking to see if there is a better way to condense that if. I am using Angular in the project, not in the example. Basicly listArr would be $scope.listArr and issues is $user.issues.

JS:

var issuesId =[1,2,3,4]
var issues = "issue one, issue two, issue three, issue four";

if (issuesId.length >= 2) {
  var str = issues.split(', ');
  var addAnd = str.pop();
  addAnd = 'and ' + addAnd;
  str.push(addAnd);
  var listArr = str.join(', ');
  document.getElementById('text').innerHTML = listArr;
}
else {
  var listArr = issues;
  document.getElementById('text').innerHTML = listArr;
}

HTML:

<p>{{listArr}}</p>

The only problem I see with your approach is that you end up with a sentence that is not correct as it will insert a , before the and when none is needed. — GillesC
– GillesC, Commented Apr 12, 2016 at 15:12
This question is tagged under angularjs - And that approach is nothing like an angularjs approach — Alon Eitan
– Alon Eitan, Commented Apr 12, 2016 at 15:14
I think it's because the code is used in Angular but the jsfiddle is not so the code displayed is the one from jsfiddle instead of the angular code. I imagine in the angular code the value is just assigned to listArr on the scope. — GillesC
– GillesC, Commented Apr 12, 2016 at 15:15
Maybe your particular use case requires a comma with only two items but this is usually incorrect. — Andy Gaskell
– Andy Gaskell, Commented Apr 12, 2016 at 15:15

Anton Harald · Accepted Answer · 2016-04-12 15:41:01Z

3

The shortest solution will be with regular expressions:

var s = "a, b, c";

s.replace(/ ([^,]*)$/, " and $1"); // "a, b, and c"

or:

s.replace(/, ([^,]*)$/, " and $1"); // "a, b and c"

answered Apr 12, 2016 at 15:41

Anton Harald

6,0145 gold badges32 silver badges71 bronze badges

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

1 Comment

RooksStrife Over a year ago

This is perfect thanks. If you have time, would you mind putting a brief overview on what does what. I have used RegEx before and love regex101.com, but always forget what does what :]

Cosmin Ababei · Accepted Answer · 2016-04-12 19:57:29Z

3

Why not change the last element of the array, directly from the array, without poping and pushing it back again, like this: str[str.length - 1] = 'and ' + str[str.length - 1]?

I've also trimmed down a bunch of code lines:

var issuesId = [1, 2, 3, 4]
var issues = "issue one, issue two, issue three, issue four";

var listArr = issues;

if (issuesId.length >= 2) {
    var str = issues.split(', ');
    str[str.length - 1] = 'and ' + str[str.length - 1];
    listArr = str.join(', ');
}

document.getElementById('text').innerHTML = listArr;

edited Apr 12, 2016 at 19:57

answered Apr 12, 2016 at 15:14

Cosmin Ababei

7,0722 gold badges22 silver badges35 bronze badges

Comments

Gonzalo Pincheira Arancibia · Accepted Answer · 2016-04-12 15:22:33Z

0

More functional style. Try this:

var issuesId =[1,2,3,4]
var issues = "issue one, issue two, issue three, issue four";

if(issuesId.length >= 2){
  var arr = issues.split(',');

  arr = arr.map(function(phrase, index){
    if(index < arr.length - 1)
     phrase+=' and';
    return phrase;
  })
  issues = arr.join(', ');
}

console.log(issues);

http://codepen.io/gpincheiraa/pen/bpLJdv

answered Apr 12, 2016 at 15:22

Gonzalo Pincheira Arancibia

3,6332 gold badges26 silver badges44 bronze badges

Comments

Anton Harald · Accepted Answer · 2016-04-12 15:29:32Z

Generally, I'd wrap the string manipulation into a function, separating it from the actual dom manipulation:

function mkStr(issues) {
   var delimeter = ', ';
   if (issues.length < 2) {
      return issues;
   } else {
     let parts = issues.split(delimeter);
     let last = "and " + parts.pop();
     parts.push(last);
     return parts.join(delimeter);
   }
}

document.getElementById('text').innerHTML = mkStr(issues);

mkStr("a, b, c"); // "a, b, and c"

But, maybe, you want rather to have "a, b, and c" as an output - this would be more natural somehow. Then you could do something like this:

function mkStr2(issues) {
   var delimeter = ', ';
   if (issues.length < 2) {
      return issues;
   } else {
     let parts = issues.split(delimeter);
     let last = parts.pop();
     return parts.join(delimeter) +
            " and " +
            last;
   }
}

mkStr2("a, b, c"); // "a, b, and c"

Collectives™ on Stack Overflow

Adding an "and" to the last word in String - js/Angular

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related