title: CSS/JS/HTML - Highlight user selection
body: <p>I'm trying to write some code to let the user highlight parts of a website's content. To do so, I replace the user selection (<code>selectedText</code>) by some HTML (<code>&lt;div class = "highlight"&gt;selectedText&lt;/div&gt;</code>) - and it works (<em>cf</em>. code below). </p>
  
  <p>The problem is that wrapping the selected text in this way overrides the rest of the CSS and ruins the layout, regardless of the HTML tag used as a container (div, span, em, mark, hr, ...). 
  I apologize if the solution to this problem is obvious, I'm quite new to web dev.</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>document.addEventListener("mouseup", function() {
    var selectedText = getSelectedText();
    if (selectedText.length &gt; 0) {
      div = document.createElement("div");
      div.innerHTML = selectedText.trim();
      div.classList.add("highlight");
      replaceSelection(div);
    }
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div.highlight {
    background-color: #F5E283;
    display: inline;
  }
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Highlighter
  // Selection: thx http://www.javascriptkit.com/javatutors/copytoclipboard.shtml :)
  function getSelectedText() {
    var selection = "";
    if (window.getSelection) {
      var selection = window.getSelection().toString();
    }
    return selection
  };
  // Replacement: thx https://stackoverflow.com/questions/3362747/how-to-insert-an-element-at-selected-position-in-html-document/3363087#3363087
  function replaceSelection(replacement) {
    var range, html;
    if (window.getSelection &amp;&amp; window.getSelection().getRangeAt) {
      range = window.getSelection().getRangeAt(0);
      range.deleteContents();
      range.insertNode(replacement);
    } else if (document.selection &amp;&amp; document.selection.createRange) {
      range = document.selection.createRange();
      html = (replacement.nodeType == 3) ? replacement.data : replacement.outerHTML;
      range.pasteHTML(html);
    }
  }
  
  document.addEventListener("mouseup", function() {
    var selectedText = getSelectedText();
    if (selectedText.length &gt; 0) {
      console.log(selectedText);
      mark = document.createElement("mark");
      mark.innerHTML = selectedText.trim();
      mark.classList.add("highlight");
      replaceSelection(mark);
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.highlight {
    background-color: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;! DOCTYPE HTML&gt;
  &lt;html&gt;
  
  &lt;body&gt;
    &lt;h1&gt;Please, select this h1&lt;/h1&gt;
    &lt;p&gt;and this text at the same time&lt;/p&gt;
    
    &lt;h1&gt;Now, select &lt;i&gt;a part of this one&lt;/i&gt;&lt;/h1&gt;
    &lt;p&gt;with this text&lt;/p&gt;
    &lt;p&gt;&lt;/p&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>