jQuery toggleClass example

Toggle class name on click in jQuery

by Sascha

HTML

<p>This random content is here <span> within the span <span> <strong>other random content</strong> is here.</p>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

function getSelectionHtml() {

  var html = "";

  if (typeof window.getSelection != "undefined") {

    var sel = window.getSelection();

    if (sel.rangeCount) {

      var container = document.createElement("div");

      for (var i = 0, len = sel.rangeCount; i < len; ++i) {

        container.appendChild(sel.getRangeAt(i).cloneContents());

      }

      html = container.innerHTML;
    }

  } else if (typeof document.selection != "undefined") {

    if (document.selection.type == "Text") {

      html = document.selection.createRange().htmlText;

    }

  }

  return html;

}

$("p").click(function() {

  if (window.getSelection) {

    sel = window.getSelection();

  } else if (document.selection && document.selection.type != "Control") { //for IE

    sel = document.selection.createRange();

  }     
  
  debugger;

  var selectedText = getSelectionHtml();
  
  alert(selectedText);

});