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

Question

目标:仅突出显示文本，不突出空白。

对我来说，在实现大填充、行高等(现在可突出显示的空白)时，突出显示整个元素可能会导致一些不守规矩和糟糕的用户体验。像突出显示文本 block 这样简单的任务可能会反过来突出显示用户不想要的网站的其他区域。我试图在我当前的网站上解决这个问题，但只能通过使用下面提供的方法来实现。

其中，我在 block 级元素中使用了一个内联元素。正如您可能注意到的那样，如果在整个网站中使用它可能会变得非常麻烦和代码繁重。有没有更好的方法来实现第2种方法？

我对 Javascript 解决方案和 CSS 持开放态度。

据我所知(通过测试)如果复制+粘贴到 Word 文档或网络邮件应用程序(如 gmail)中，它不会呈现不同。如果您知道这可能导致的任何问题，请在下面提及。

为了更好地说明:

随着突出显示的改进: 没有亮点改进:

^ 虽然这是一个半生不熟的例子，它展示了它可以派上用场的一个例子，相信我，还有很多其他例子。

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

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>