Showing selected words [Javascript]

Question

The words inside the sentence are highlighted when clicked with the mouse. It works right up here.

But; Show the selected words with the button, unfortunately, does not work.

JSFiddle

words = [];
var sentence = $('.sentence').html().split(/\s+/),
  result = [];


for (var i = 0; i < sentence.length; i++) {
  result[i] = '<span>' + sentence[i] + '</span>';
  var a = sentence[i];
}

$('.sentence').html(result.join(' '));

if (a.indexOf(" ") + 1) {
  alert('fail: ' + a);
} else {
  words.push(a);
}

$('.sentence').on('click', 'span', function() {
  $(this).addClass('highlight');
});

$('button').click(function() {
  alert(words);
});

$('$selectedWords').innerHTML = words;

.sentence span:hover,
.highlight {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="sentence">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique aliquam totam odit excepturi reiciendis quam doloremque ab eius quos maxime est deleniti praesentium. Quia porro commodi blanditiis iure dicta voluptatibus.</p>



Selected words:
<p id="selectedWords"></p>

<button>Show in alert</button>

Answer 1

Take a look at the JSFiddle I've put together for a starting point. It's not the best but will hopefully steer you in the right direction.

https://jsfiddle.net/qt9hgbkp/

The javascript that powers the example...

/**
 * Sentence element
 * @var {Object}
 */
var $sentence = $('.sentence');

/**
 * Selected words output element
 * @var {Object}
 */
var $selected = $('#selectedWords');

/**
 * Wrap each word in a sentence in a span
 * @param {String} sentence
 * @return {String}
 */
function wrapSentence(sentence) {
    // Get element contents and split by whitespace
  var words = $sentence.text().split(/\s+/);
  // Create an empty array for storing wrapped elements
  var wrapped = [];

  // Loop through each word and wrap
  for (var i = 0; i < words.length; i++) {
    wrapped.push('<span>' + words[i] + '</span>');
  }

    // Combine words into a string
  return wrapped.join(' ');
}

/**
 * Find all selected words in $sentence element
 * @return {Array}
 */
function getSelected() {
    // Create an empty array for storing selected words
  var selected = [];

  // Find all spans with the highlight class
  $sentence.find('span.highlight').each(function() {
    // Push span values to array
    selected.push($(this).text());
  });

  // Return results
  return selected;
}

/**
 * Override original html with wrapped
 */
$sentence.html(wrapSentence());

/**
 * Handle click event for each span in sentence
 */
$sentence.on('click', 'span', function() {
    // Add/remove the highlight class
    $(this).toggleClass('highlight');
  // Update the selected output
  $selected.text( getSelected().join( ', ' ) );
});

/**
 * Alert the user with selected words
 */
$('button').on( 'click', function() {
    alert( getSelected() );
} );