Popup Span Words

by redbmk

HTML

<script>
  var know = "che;più";

  function CheckKnowWords() {
    if (know != null) {
      know = know.split(";");
      var words = $("article").html().split(" ");
      $("article").empty();
      $.each(words, function(i, v) {

        if (know.indexOf(v) > -1) {
          IKnow = "true";
        } else {
          IKnow = "false";
        }

        if (IKnow == "true") {
          $("article").append(" ");
          $("article").append(v + " ");
        } else {
          $("article").append(" ");
          $("article").append($("<span  style='border-radius: 4px;border: 1px solid #ffcccc; background: #ffcccc;'>").html(v));
        }
      });
    } else {
      var words = $("article").html().split(" ");
      $("article").empty();
      $.each(words, function(i, v) {
        $("article").append(" ");
        $("article").append($("<span  style='border-radius: 4px;border: 1px solid #ffcccc; background: #ffcccc;'>").html(v));
      });
    }
  }

</script>
<article id="textDescription">
Si potrebbe comunemente pensare che i passaporti americani e britannici siano più potenti, da un punto di vista turistico, rispetto a quelli degli altri Paesi del mondo. Nel senso che permettano più accessi senza bisogno di visto. In realtà non è vero,
  e lhanno scoperto quelli della ditta britannica <b>Henley & Partners</b> sui visti Partners Index, utilizzando i dati del International Air Transport Association (IATA).
  <br>
  <br> Sono i tedeschi, in base a questi dati, ad avere i passaporti più forti, che danno loro l'accesso senza visto a 177 Paesi. L'indice classifica 199 Paesi in base alla libertà di viaggio che ognuno di questi offre ai suoi cittadini su un massimo di 218.</article>
<br>
<Br>
<input type="button" onclick="CheckKnowWords();" value="Paint">

JavaScript

var parentContainerId = "textDescription"

if (!window.CurrentSelection) {
  CurrentSelection = {}
}

CurrentSelection.Selector = {}

//get the current selection
CurrentSelection.Selector.getSelected = function() {
    var sel = '';
    if (window.getSelection) {
      sel = window.getSelection()
    } else if (document.getSelection) {
      sel = document.getSelection()
    } else if (document.selection) {
      sel = document.selection.createRange()
    }
    return sel
  }
  //function to be called on mouseup
CurrentSelection.Selector.mouseup = function() {

  // Gets clicked on word (or selected text if text is selected)
  var t = '';
  var getWord = '';
  if (window.getSelection && (sel = window.getSelection()).modify) {
    // Webkit, Gecko
    var s = window.getSelection();
    if (s.isCollapsed) {
      s.modify('move', 'forward', 'character');
      s.modify('move', 'backward', 'word');
      s.modify('extend', 'forward', 'word');
      t = s.toString();
    } else {
      t = s.toString();
    }
  } else if ((sel = document.selection) && sel.type != "Control") {
    // IE 4+
    var textRange = sel.createRange();
    if (!textRange.text) {
      textRange.expand("word");
    }
    // Remove trailing spaces
    while (/\s$/.test(textRange.text)) {
      textRange.moveEnd("character", -1);
    }
    t = textRange.text;
  }

  var st = CurrentSelection.Selector.getSelected()
  if (document.selection && !window.getSelection) {
    var range = st
    range.pasteHTML("<span class='selectedText'>" + range.htmlText + "</span>");
  } else {
    var range = st.getRangeAt(0)
    var newNode = document.createElement("span");
    newNode.setAttribute("class", "selectedText");
    
    // Solves issue #1
    newNode.appendChild(range.extractContents());
    range.insertNode(newNode);
    
    // Solves issue #2
    getWord = newNode.innerText;
    newNode.setAttribute("title", getWord);

    alert(getWord);

  }
}

$(function() {

  $("#" +...