突出显示文本而不突出显示/选择整个元素 - 是否可以避免虚拟元素？

Question

目标：仅突出显示文字，而不是空格。

对我来说，突出显示整个元素，可能会在实现大填充，行高等时产生一些难以驾驭和不良的用户体验（现在可突出显示的空白）。突出显示文本块这样简单的任务可以反过来突出显示用户不想要的网站的其他区域。我试图在我当前的网站上解决这个问题，但只能通过使用下面提供的方法来实现它。

其中，我在块级元素中使用内联元素。正如您可能已经注意到的那样，如果在整个网站中使用，可能会非常繁琐且代码繁重。有没有更好的方法来实现第二种方法？

我对Javascript解决方案以及CSS开放。

据我所知（通过测试），如果复制+粘贴到word文档或web邮件应用程序（如gmail），它的呈现方式不同。如果您知道这可能导致的任何问题，请在下面提及。

更好地说明：

亮点改进： 没有突出改进：

^ 当然这是一个半屁股的例子，它展示了一个可以派上用场的实例，还有很多其他人，相信我。

＆＃13;

＆＃13;

.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}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你不能直接使用CSS来定位DOM中的文本节点，但你可以使用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>

Answer 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>   

我不确定你是否只想要一个精简版代码并且没有下划线。 看一下 Fiddle ，看看这是否正是您要找的。