Search for longest substring in alphabetical order in a given string
You don't have to split a string into an Array, you can work on a String directly.

Note that I have removed you inline onclick handler. https://en.wikipedia.org/wiki/Unobtrusive_JavaScript

How your ES3 code probably should have looked



var main = document.getElementById('main');
main.style.visibility = 'visible';
var enterString = document.getElementById('enterString');
// test string azcbobobegghakl, should yield beggh
function findSubStr() {
  var string = enterString.value;
  var lastSub = '';
  var longestSub = '';
  for (var index = 0; index &lt; string.length; index += 1) {
    var character = string.charAt(index);
    if (character &gt;= lastSub.slice(-1)) {
      lastSub += character;
      if (lastSub.length &gt; longestSub.length) {
        longestSub = lastSub;
      }
    } else {
      lastSub = character;
    }
  }
  if (main.firstChild) {
    main.firstChild.nodeValue = longestSub;
  } else {
    main.appendChild(document.createTextNode(longestSub));
  }
  return false;
}

document.getElementById('search').onclick = findSubStr;
#start {
  top: 25%;
  left: 40%;
  position: absolute;
}
#main {
  top: 50%;
  left: 45%;
  font-size: 1.5em;
  position: absolute;
  visibility: hidden;
}
#enterString {
  color: gray;
}
&lt;div id="start"&gt;
  &lt;input id="enterString" placeholder="Please enter string"&gt;
  &lt;button id="search"&gt;Sub-String Search&lt;/button&gt;
&lt;/div&gt;
&lt;div id="main"&gt;&lt;/div&gt;




How it could have looked in ES5



var forEach = Function.prototype.call.bind(Array.prototype.forEach);
var main = document.getElementById('main');
main.style.visibility = 'visible';
var enterString = document.getElementById('enterString');
// test string azcbobobegghakl, should yield beggh
function findSubStr() {
  var lastSub = '';
  var longestSub = '';
  forEach(enterString.value, function(character) {
    if (character &gt;= lastSub.slice(-1)) {
      lastSub += character;
      if (lastSub.length &gt; longestSub.length) {
        longestSub = lastSub;
      }
    } else {
      lastSub = character;
    }
  });
  main.textContent = longestSub;
}

document.getElementById('search').addEventListener('click', findSubStr, false);
#start {
  top: 25%;
  left: 40%;
  position: absolute;
}
#main {
  top: 50%;
  left: 45%;
  font-size: 1.5em;
  position: absolute;
  visibility: hidden;
}
#enterString {
  color: gray;
}
&lt;div id="start"&gt;
  &lt;input id="enterString" placeholder="Please enter string"&gt;
  &lt;button id="search"&gt;Sub-String Search&lt;/button&gt;
&lt;/div&gt;
&lt;div id=main "&gt;&lt;/div&gt;




How it could have looked in ES6



const main = document.getElementById('main');
main.style.visibility = 'visible';
const enterString = document.getElementById('enterString');
// test string azcbobobegghakl, should yield beggh
function findSubStr() {
  let lastSub = '';
  let longestSub = '';
  for (let character of enterString.value) {
    if (character &gt;= lastSub.slice(-1)) {
      lastSub += character;
      if (lastSub.length &gt; longestSub.length) {
        longestSub = lastSub;
      }
    } else {
      lastSub = character;
    }
  }
  main.textContent = longestSub;
}

document.getElementById('search').addEventListener('click', findSubStr, false);
#start {
  top: 25%;
  left: 40%;
  position: absolute;
}
#main {
  top: 50%;
  left: 45%;
  font-size: 1.5em;
  position: absolute;
  visibility: hidden;
}
#enterString {
  color: gray;
}
&lt;div id="start"&gt;
  &lt;input id="enterString" placeholder="Please enter string"&gt;
  &lt;button id="search"&gt;Sub-String Search&lt;/button&gt;
&lt;/div&gt;
&lt;div id="main"&gt;&lt;/div&gt;




There are surely other ways that you could have tackled this, but essentially there is nothing wrong with your approach.

If you have any particular questions about the changes/code posted, then just comment and I will expand in the areas that most need it.