JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Links:</h2>
<div>
  <a href="#">url</a><span>A</span>n1<a href="#">https://www.google.pl</a><span>B</span>n2
</div>

<table>
  <tr>
    <th rowspan="2">Position</th>
    <th colspan="2">Chrome</th>
    <th colspan="2">Firefox</th>
    <th colspan="2">IE9</th>
    <th colspan="2">IE10</th>
    <th colspan="2">IE11</th>
  </tr>
  <tr>
    <th>Selection</th>
    <th>Typing</th>
    <th>Selection</th>
    <th>Typing</th>
    <th>Selection</th>
    <th>Typing</th>
    <th>Selection</th>
    <th>Typing</th>
    <th>Selection</th>
    <th>Typing</th>
  </tr>
  <tr>
    <td><span>A</span></td>
    <td>link</td>
    <td>normal</td>
    <td>depends*</td>
    <td>depends*</td>
    <td>normal</td>
    <td>normal</td>
    <td>normal</td>
    <td>normal</td>
    <td>normal</td>
    <td>normal</td>
  </tr>
    <tr>
    <td><span>B</span></td>
    <td>link</td>
    <td>normal</td>
    <td>depends*</td>
    <td>depends*</td>
    <td>nomal</td>
    <td>normal</td>
    <td>normal</td>
    <td>normal</td>
    <td>normal</td>
    <td>normal</td>
  </tr>
</table>

<div contenteditable="true" class="testing1"><a href="#">url</a>n1<a href="#">https://www.google.pl</a>n2</div>


<h2>Styles:</h2>
<div>
  <span>A</span><strong>bold1</strong><span>B</span>normal1<span>C</span><strong>bold2</strong><span>D</span>
</div>

<table>
  <tr>
    <th rowspan="2">Position</th>
    <th colspan="2">Chrome</th>
    <th colspan="2">Firefox</th>
    <th colspan="2">IE9</th>
    <th colspan="2">IE10</th>
    <th colspan="2">IE11</th>
  </tr>
  <tr>
    <th>Selection</th>
    <th>Typing</th>
    <th>Selection</th>
    <th>Typing</th>
    <th>Selection</th>
    <th>Typing</th>
    <th>Selection</th>
    <th>Typing</th>
    <th>Selection</th>
    <th>Typing</th>
  </tr>
  <tr>
    <td><span>A</span></td>
    <td><strong>bold</strong></td>
    <td><strong>bold</strong></td>
    <td><strong>bold</strong></td>
    <td><strong>bold</strong></td>
    <td><strong>bold</strong></td>
   ...

CSS

div {
  width:500px;
  height:30px;
  font-size:20px;
  padding:0 25px;
  margin: 15px 0;
}

span {
  color: #F00;
}

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid #999;
}

JavaScript

document.querySelector('.testing1').addEventListener('click', function(e) {
	console.log(document.getSelection().anchorNode.textContent, document.getSelection().focusNode.textContent);
});
document.querySelector('.testing1').addEventListener('keyup', function(e) {
	console.log(document.getSelection().anchorNode.textContent, document.getSelection().focusNode.textContent);
});

document.querySelector('.testing2').addEventListener('click', function(e) {
	console.log(document.getSelection().anchorNode.textContent, document.getSelection().focusNode.textContent);
});
document.querySelector('.testing2').addEventListener('keyup', function(e) {
	console.log(document.getSelection().anchorNode.textContent, document.getSelection().focusNode.textContent);
});