Count number of users in people picker using Javascript

Question

Here is the scenario,
I'm adding two user entries to people picker(multiple selection is permitted) field and I need to count these entries using Javascript/Jquery(Expected Output - 2).
how to achieve this?
I tried to get the values using Jquery it's giving complete HTML snippets.
This is what I've tried:

 $("#DivId").focusout(function () {
            alert($("#DivId").html());
        });

Answer 1

Update: The people picker will create a span element for each user, you should be able to use this code (using jQuery):

$('.ms-entity-resolved').length

If you have several pickers you should be able to split them, for example by [name*=UserFieldValue] like this:

$('[name*=UserFieldValue]').each(function(){
  var count = $(this).next().find('.ms-entity-resolved').length;
  console.log(count);
});

Answer 2

EntityEditor.js contains method GetPickerControlValue for getting picker control value(s). (by default ';' delimiter is used for multiple values)

The following code demonstrates how to get the number of control values in Picker Control:

var pickerControlVals = GetPickerControlValue(currentEntityEditorContextId, true, true);

var numOfUsers = pickerControlVals.split(';').length - 1;
console.log(numOfUsers);

Variable currentEntityEditorContextId corresponds to Picker Control Id and available on the page where Picker Control is rendered

Answer 3

First find ID of people picker Div & get the ff part:

People Picker Div ID = "ctl00_ctl40_g_478948c1_e923_4777_9306_26c03d2dade0_**ff181**_ctl00_ctl00_UserField_upLevelDiv";

//Use 'ff181' as an unique reference to this field..number may change across fields but 'ff' is constant

   var NoOfUsers = CountUsers('ff181');

    function CountUsers(identifier) 

{
AppUsrs =[];

var tags = document.getElementsByTagName('DIV');
for (var i=0; i < tags.length; i++)
{    
    var tempString = tags[i].id;    
    if ((tempString.indexOf(identifier) > 0) && (tempString.indexOf('UserField_upLevelDiv') > 0))
    {
        var innerSpans = tags[i].getElementsByTagName("SPAN");
        for(var j=0; j < innerSpans.length; j++) 
        {          
                if(innerSpans[j].id != 'content') 
                {   AppUsrs.push(innerSpans[j].id.split('|')[2]);                       
                }  

        }     
        return AppUsrs;
    }   
}   
    return null;  
 }

The function CountUsers will return number of users in people picker field.