JSFiddle - React, Tailwind, and code Playground

by hea8y

HTML

<script src="http://izvestia.ru/js/jquery-1.6.4.min.js"></script>
<p class="p3">
  <span>Простотекствспане</span>
  <div>Таку нас<a style="color:green">стэг омАнормал <span style="color:orange">ьноработ</span>ает</a>ещеодин текст</div>
  <div>Атакуна сстЭ<span style="color:green">го мСПАНрабо таетне</span>но мально</div>
  <span class="s2">Сергей Гугкаев, г</span><span class="s1">енеральный директор компании Sea Launch AG, на балансе которой сейчас находится инфраструктура «Морского старта», от              комментариев воздержался.&nbsp;</span>
</p>
<br>
<br>
<br>
<span id="state-msg" style="color:red"></span>


<br>
<br>
<br>
<span id="result-msg" style="color:red"></span>

<br>
<br>
<br>
<span id="off-msg" style="color:red"></span>

<br>
<br>
<br>
<span id="sel-msg" style="color:red"></span>

<br>
<br>
<br>
<span id="into-msg" style="color:red"></span>

JavaScript

var msg = document.getElementById('state-msg');
var msg2 = document.getElementById('result-msg');
var msg3 = document.getElementById('off-msg');
var msg4 = document.getElementById('sel-msg');
var msg5 = document.getElementById('into-msg');

document.body.addEventListener('keydown', function(e) {

  var selection = window.getSelection(),

    selectionRange = selection.getRangeAt(0),
    sel = selectionRange.toString();

  if (sel.length < 2) {
    alert('Выделенный фрагмент пустой');
  } else if (sel.length > 500) {
    alert('Выделенный фрагмент слишком большой');
  }

  var into = selectionRange.startContainer.nodeValue.toString(),
    intoEnd = selectionRange.endContainer.nodeValue.toString();



  var proofAfter = intoEnd.substr(selectionRange.endOffset, 50);

  if (selectionRange.startOffset < 50) {
    var proofBefore = into.substr(0, selectionRange.startOffset);
  } else {
    var proofBefore = into.substr(selectionRange.startOffset - 50, 50);
  }

  msg.textContent = '...' + proofBefore + '<span style="color:red">[' + sel + ']</span>' + proofAfter + '...';

  msg3.textContent = '  _ startOffset : ' + selectionRange.startOffset + '_ endOffset : ' + selectionRange.endOffset;
  msg4.textContent = 'sel.length:' + sel.length;
  msg5.textContent = 'selection.getRangeAt(0).startContainer.nodeValue.toString() : ' + into + intoEnd;


});