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

2023年1月3日 180次阅读

目标：仅突出显示文本,而不是空格.

对我来说,突出显示整个元素,当实现大填充,线高等(现在可突出显示的空白)时,可能会导致一些不规则和不良的用户体验.突出显示文本块这样简单的任务可以反过来突出显示用户不想要的网站的其他区域.我正在尝试在我当前的网站上解决这个问题,但只能通过使用下面提供的方法来实现它.

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

我对Javascript解决方案以及CSS持开放态度.

据我所知(通过测试),如果将其复制粘贴到Word文档或Web邮件应用程序(如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>

最佳答案 您不能使用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>
点赞