Geek Answers Handbook

Highlighting text without selecting / selecting an entire element - is it possible to avoid dummy elements?

Purpose: to highlight only text, not space.

Selecting an entire element, for me, can lead to some uncontrollable and bad UX when large paddings, line heights, etc. are implemented. (spaces that are now highlighted). A task as simple as highlighting a block of text can, in turn, highlight other areas of a website that were not intended for the user. I am trying to resolve this on my current site, but I was only able to achieve it using the method below.

In which I use the inline element inside the block level element. Which, as you can see, can become very cumbersome and heavy code if used on a website. Is there a better way to achieve the second method?

I am open to Javascript solutions as well as CSS.

As far as I know (through testing), it is not processed otherwise if you copy + paste into a text or email application such as gmail. If you are aware of any problems that may arise, report it below.

To better illustrate:

With Improved Improvements: enter image description here Without Improvements Highlight: enter image description here

^ Of course, this is half of the respondents, he demonstrates one example where he can come in handy, there are many others, believe me.

.highlight-text-only > *{
display:block;
  -webkit-user-select: none;
 -moz-user-select: none;
  -ms-user-select: none;
   -o-user-select: none;
      user-select: none}

.highlight-text-only *>span,
.highlight-text-only *>strong{
display:inline;
  -webkit-user-select: text;
 -moz-user-select: text;
  -ms-user-select: text;
   -o-user-select: text;
      user-select: text}
<div class="highlight-text-and-element">
  <h3>Testing Text Selection Method 1 (default)</h3>
  <div>of only text</div>
  <a href="#"><strong>with</strong></a>
  <p>highlighting</p>
  <span>the actual elements</span>
</div>

<hr>

<div class="highlight-text-only">
  <h3><span>Testing Selection Method 2</span></h3>
  <div><span>of only text</span></div>
  <a href="#"><strong>without</strong></a>
  <p><span>highlighting</span></p>
  <span><span>the actual elements</span></span>
</div>
Run codeHide result
+4
2

DOM CSS, javascript <span>, , :

function wrapText(nodes, className) {
  for (var i=0,len=nodes.length; i<len; i++) {
    var node=nodes[i];
    
    if (node.nodeType == 3) {
      var wrapper=document.createElement("span");
      wrapper.className = className;
      node.parentNode.insertBefore(wrapper,node);
      wrapper.appendChild(node);
    } else {
      wrapText(node.childNodes, className);
    }
  }
}

wrapText(document.querySelectorAll(".highlight-text-only"),"selectme");
.highlight-text-only {
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none;
  user-select: none;
}

.highlight-text-only .selectme {
  -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; -o-user-select: text;
  user-select: text;
}
<div class="highlight-text-and-element">
  <h3>Testing Text Selection Method 1 (default)</h3>
  <div>of only text</div>
  <a href="#"><strong>with</strong></a>
  <p>highlighting</p>
  <span>the actual elements</span>
</div>

<hr>

<div class="highlight-text-only">
  <h3>Testing Selection Method 2</h3>
  <div>of only text</div>
  <a href="#"><strong>without</strong></a>
  <p>highlighting</p>
  <span>the actual elements</span>
</div>
Hide result
+2

.highlight-text-only {
    color: orange;
}

.highlight-text-only span {
    text-decoration: none;
    color:blue;
    font-weight:600;
}
<hr>

<div class="highlight-text-only">
  <h3>Testing Selection Method</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium commodo nulla, sit amet rutrum nibh pretium eget. Aliquam vitae <span>egestas</span> nisi, vitae aliquam risus. <span>Suspendisse</span> potenti. Mauris iaculis ligula ultricies cursus tincidunt. Ut risus tellus, maximus at metus et, posuere accumsan dolor. Nunc ut augue est. Phasellus euismod felis quis quam fringilla, quis varius ligula commodo. Curabitur ante ligula, scelerisque vel auctor et, imperdiet non odio. Proin ac sapien sed est efficitur pretium vel id elit. Praesent volutpat, nisi et pharetra interdum, enim orci tincidunt urna, vel accumsan nulla mi vel ligula. <span>Mauris</span> augue quam, placerat eget posuere non, imperdiet nec purus. Praesent nisl nisl, venenatis in erat eget, euismod dapibus metus.</p>
</div>
    
<hr>
Hide result

, Lite- . Fiddle, , , .

0

More articles:


All Articles