Run results for: Compare toggling attribute spaced values

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 Edge/15.15063

Browser: Chrome 52

Operating system: Windows

Device Platform: Other

Date tested: 7 years ago

Test name	Executions per second
V1	39393.6 Ops/sec
V2	39722.3 Ops/sec

HTML Preparation code:

<div id="asdf1"></div>
<div id="asdf2"></div>

Script Preparation code:

function toggleAttributeSpacedValue2(elements, attributeName, value, force) {
  if (elements && typeof elements == 'object') {
  
    var i = 0,
        eln = typeof elements.length == 'number',
        el = eln ? elements.length : 1,
        vl,
        vln,
        values,
        finalAttributeValue,
        currentAttributeValue,
        valueItem,
        spacedValueItem,
        hasValueItem,
        element;
  
    if (value && (typeof value == 'string' || (value = value + ''))) {

      for (; i < el; i++) {
        if (typeof (element = eln ? elements[i] : elements) == 'object' && element.nodeType === 1) {
          finalAttributeValue = currentAttributeValue = (currentAttributeValue = element.getAttribute(attributeName)) ? ' ' + currentAttributeValue.replace(rSpaceGlobal, ' ') + ' ' : '';
          values || ((vln = value.indexOf(' ') > -1) ? vl = (values = value.split(rSpaceGlobal)).length : vl = 1, values = value.trim());
          for (var j = 0; j < vl; j++) {
            if ((valueItem = vln ? values[j] : values)) {
              hasValueItem = !finalAttributeValue ? false : finalAttributeValue.indexOf(spacedValueItem = ' ' + valueItem + ' ') > -1;
              if (typeof force != 'boolean' || force != hasValueItem) {
                finalAttributeValue = hasValueItem ? finalAttributeValue.replace(spacedValueItem, ' ') : finalAttributeValue + valueItem + ' ';
              }
            }
          }
          if (finalAttributeValue && (finalAttributeValue = finalAttributeValue.trim())) {
            element.setAttribute(attributeName, finalAttributeValue);                    
          } else {
            element.removeAttribute(attributeName);
          }
        }
      }
    } else {
      for (; i < el; i++) {
        if (typeof (element = eln ? elements[i] : elements) == 'object' && element.nodeType === 1) {
          element.removeAttribute(attributeName);
        }
      }
    }
  }
}

var rSpaceGlobal = /\s+/g,
    toggleAttributeSpacedValue1 = (function() {
      var rSpace = /\s+/, 
          rSpaceGlobal = /\s+/g, 
          rAttributeCleanup = /[\n\t\r]/g;
      return function(elements, attributeName, value, force) {
        if (elements && typeof elements == 'object') {
        
          if (typeof elements.length != 'number') {
            elements = [elements];
          }
        
          if (typeof force != 'boolean') {
            force = undefined;
          }
        
          if (value && (typeof value == 'string' || (value = value + ''))) {
            var values,
                attributeValue,
                finalAttributeValue,
                currentAttributeValue,
                valueItem,
                spacedValueItem,
                hasValueItem,
                remove,
                element;

            for (var i = 0, el = elements.length; i < el; i++) {
              element = elements[i];
              if (typeof element == 'object' && element.nodeType === 1) {
                attributeValue = element.getAttribute(attributeName);
                finalAttributeValue = currentAttributeValue = attributeValue ? (' ' + attributeValue + ' ').replace(rAttributeCleanup, ' ') : '';
                for (var j = 0, vl = (values || (values = value.split(rSpace))).length; j < vl; j++) {
                  if ((valueItem = values[j])) {
                    spacedValueItem = ' ' + valueItem + ' ';
                    hasValueItem = ~finalAttributeValue.indexOf(spacedValueItem);
                    remove = force != undefined ? !force : hasValueItem;
                    if (remove && hasValueItem) {
                      finalAttributeValue = finalAttributeValue.replace(spacedValueItem, ' ')
                    } else if (!remove && !hasValueItem) {
                      finalAttributeValue = finalAttributeValue + spacedValueItem;
                    }
                  }
                }
                if (finalAttributeValue != currentAttributeValue) {
                  finalAttributeValue = finalAttributeValue.replace(rSpaceGlobal, ' ');
                  finalAttributeValue = finalAttributeValue ? finalAttributeValue.trim() : finalAttributeValue;
                  if (finalAttributeValue) {
                    if (attributeName==='class'){
                      element.className = finalAttributeValue;
                    }else{
                      element.setAttribute(attributeName, finalAttributeValue);                    
                    }
                  } else {
                    element.removeAttribute(attributeName);
                  }
                }
              }
            }
          } else {
            for (var i = 0, el = elements.length; i < el; i++) {
              element = elements[i];
              if (typeof element == 'object' && element.nodeType === 1) {
                element.removeAttribute(attributeName);
              }
            }
          }
        }
      }
    })()

Tests:

V1
var asdf = document.querySelector('asdf1'); toggleAttributeSpacedValue1(asdf, 'data-role', 'aaa'); toggleAttributeSpacedValue1(asdf, 'data-role', 'aaa', true); toggleAttributeSpacedValue1(asdf, 'data-role', 'bbb', false); toggleAttributeSpacedValue1(asdf, 'data-role', 'bbb'); toggleAttributeSpacedValue1(asdf, 'data-role', 'ccc'); toggleAttributeSpacedValue1(asdf, 'data-role', 'bbb'); toggleAttributeSpacedValue1(asdf, 'data-role', 'aaa', false); toggleAttributeSpacedValue1(asdf, 'data-role', 'ccc');
V2
var asdf = document.querySelector('asdf2'); toggleAttributeSpacedValue2(asdf, 'data-role', 'aaa'); toggleAttributeSpacedValue2(asdf, 'data-role', 'aaa', true); toggleAttributeSpacedValue2(asdf, 'data-role', 'bbb', false); toggleAttributeSpacedValue2(asdf, 'data-role', 'bbb'); toggleAttributeSpacedValue2(asdf, 'data-role', 'ccc'); toggleAttributeSpacedValue2(asdf, 'data-role', 'bbb'); toggleAttributeSpacedValue2(asdf, 'data-role', 'aaa', false); toggleAttributeSpacedValue2(asdf, 'data-role', 'ccc');

Run results for: Compare toggling attribute spaced values

V1

V2