title: JavaScript and css: highlight multiple words all with same background
body: <p>I'm trying to make a basic web application where people can highlight multiple words (i.e., click on the first word, then click on a word further on, and everything will be highlighted, even on another line).</p>
  
  <p>So far I was able to wrap all of the words in  tags and set a click event listener to each one which changes it's className to "highlight" which is just <code>background-color:yellow</code>.</p>
  
  <p>The problem is that only the background of that individual word is highlighted, but i want everything in between the two (or more, even on different lines) words to be highlighted.</p>
  
  <p>To complicate things a little more, i also have punctuation and maybe other stuff inbetween the words, which are not surrounded by span tags, but I want everything between the words to have a different background color/ be selected.</p>
  
  <p>I was thinking of just putting the necessary words that are selected in they're own, separate span tag, but then, I'm not sure how to make it dynamically change exactly, and i also want the user to save the selections and then re-select them with a button or something, so that means that one word could be in 2 different phrases, and I'm not sure how one word could be in two different span tags....</p>
  
  <p>So basically: how can I select multiple words in JavaScript including highlighting everything inbetween the two words?</p>
  
  <p>EDIT 
  There was a request for some of the code I've tried, so I've attempted to simplify the relevant sections:</p>
  
  <pre><code>var h= eid("HebrewS");
  var currentPhrase=[];
  var equal=false;
  var shtikles = [
  
  ];
  
  h.innerHTML = h.innerHTML.replace(/([\u0590-\u05FF\"\']+)/g,'&lt;span class="shtikle"""&gt;$1&lt;/span&gt;');
  
  var words = q("#HebrewS span");
  words.forEach(function(item, idx){
  
  
  shtikles[idx] = {obj:item, id:idx, heb:item.innerHTML, translation:"means "+ idx};
  item.addEventListener("click", function(e) {
  
  
  if(currentPhrase.length == 0) {
      currentPhrase.push(idx);
      currentPhrase[1]=idx;
      equal=true;
  }
  else {
      currentPhrase[1]=idx;
  
      if(currentPhrase[1] &lt; currentPhrase[0]) {
          currentPhrase.reverse();
      }
      if(currentPhrase[0]==currentPhrase[1]) 
          if(!equal) {
              equal=true;
          } else {
              currentPhrase = new Array();
              equal=false;
          }
      else 
          equal=false;
  
      }
  
  selectPhrase(currentPhrase);
  
  });
  
  function selectPhrase(p) {
  
  for(var i =0;i&lt;shtikles.length;i++) {
      if(shtikles[i].obj)
      if(p.length &gt; 0) {
      if(i  &lt; p[0] || i &gt; p[1]) {
          if(shtikles[i].obj.className != "shtikle") {
  
              shtikles[i].obj.className ="shtikle";
          }
      }
      } else {
          shtikles[i].obj.className = "shtikle";
      }
  } 
  for(var i = p[0]; i &lt;= p[1]; i++) {
      shtikles[i].obj.className="phrasePart";
  }
  }
  
  function q(a) {
  return document.querySelectorAll(a);
  
  }
  function eid(id) {
  return document.getElementById(id);
  
  }
  </code></pre>
  
  <p>Now for the html:</p>
  
  <pre><code>&lt;div style="" id ="HebrewS"&gt;today I will show,.  you how] to read.. {Maamarim! וחזקת והיית לאיש1, הנה ידוע2 שהמאמר שאמר אדמו"ר (מהורש"ב) נ"ע ביום השביעי3 דחגיגת הבר מצוה של בנו יחידו כ"ק מו"ח אדמו"ר, י"ט תמוז4 תרנ"ג [שמאמר זה הוא סיום וחותם ההמשך תפילין דמארי עלמא5 שהתחיל לומר בי"ב תמוז, יום הבר מצוה] היתה התחלתו בפסוק זה. – השייכות דפסוק זה (וחזקת והיית לאיש) לבר מצוה בפשטות היא, ע"פ הידוע6 דזה שבן שלש עשרה (דוקא) מחוייב במצוות הוא כי אז דוקא נק' בשם איש. וצריך להבין, דמכיון שבן י"ג שנה נעשה איש (ע"פ טבע), מהי ההדגשה לומר (בחגיגת בר מצוה) וחזקת והיית לאיש. וגם צריך להבין, הרי המעלה דבן י"ג שנה היא שאז נעשה בר דעת7, דדעת הוא במוחין, ובפרט לפי המבואר בהמאמר ד"ה איתא במדרש תילים תרנ"ג [שהוא אחד המאמרים שחזר אותם כ"ק מו"ח אדמו"ר בחגיגת הבר  שלו]8 שהמעלה דבן י"ג שנה היא שאז יש לו עצם המוחין9, ומהו הדיוק בבן י"ג שנה בהתואר איש שמורה10 על המדות
  </code></pre>
  
  <p>
  Now css:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
  .shtikle:hover{
      background-color:yellow;
  }
  
  .phrasePart{
      background-color: purple;
      border: 0px solid black;
  }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>I haven't tested the simplified version of the code, but if you try it out should work. </p>
  
  <p>The basic point is :it selects each word individually, but doesn't highlight the stuff between the words (and I don't want to put all of the words in the current phrase into they're own span, because I want to save the phrase and have it selectable later, and also with multiple phrases some words might be in both) </p>