HTML中无标签文本的变色技巧

不裁_caiii
832 阅读4分钟

在 HTML 中，有时候我们需要将文本中的某些部分进行标记并进行样式控制，比如让某些单词或短语变成不同的颜色。对于已经有标签的文本，这个问题很容易解决，只需要用 CSS 来选择指定的标签并设置样式即可。但如果没有标签却需要控制样式呢？本文将介绍一种技巧，可以在无标签文本中实现 CSS 变色效果。

使用 ::before 和 ::after 伪元素

我们可以利用 CSS 伪元素 ::before 和 ::after 来为无标签文本添加标记，并设置相应的样式。具体做法是在需要加标记的文本前后添加一个元素，然后利用伪元素来设置标记和样式。

下面是一个示例代码，展示了如何使用 ::before 和 ::after 实现无标签文本变色：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .highlight {
        color: red;
        font-weight: bold;
      }
      .text-without-tags:before,
      .text-without-tags:after {
        content: '|';
        color: transparent;
      }
      .text-without-tags:before {
        margin-right: 5px;
      }
      .text-without-tags:after {
        margin-left: 5px;
      }
    </style>
  </head>
  <body>
    <p class="text-without-tags">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus vestibulum neque, ac aliquam lorem egestas rhoncus.</p>
    <p class="text-without-tags">Fusce tristique, mi sed fermentum porttitor, enim ligula auctor purus, et blandit nisl risus vel ante.</p>
    <p class="text-without-tags">Cras tempus augue non elit faucibus rutrum. Nullam malesuada bibendum dolor at varius.</p>

    <script>
      // 获取所有无标签文本元素
      const textWithoutTags = document.querySelectorAll('.text-without-tags');

      // 遍历每个无标签文本元素，为其设置标记和样式
      textWithoutTags.forEach((element) => {
        const words = element.textContent.split(' ');
        element.innerHTML = '';
        words.forEach((word) => {
          const span = document.createElement('span');
          span.textContent = word + ' ';
          if (word.length > 5) {
            span.classList.add('highlight');
          }
          element.appendChild(span);
        });
        element.firstChild.classList.add('before');
        element.lastChild.classList.add('after');
      });
    </script>
  </body>
</html>

在上面的代码中，我们首先定义了一个 .highlight 类，用于设置高亮颜色和加粗字体样式。然后，我们创建了一个类名为 .text-without-tags 的样式，并为其设置 ::before 和 ::after 伪元素，用于添加标记符号。

在 JavaScript 部分，我们获取了所有具有 .text-without-tags 类名的元素，并遍历每个元素。在遍历过程中，我们将文本内容按照空格分割成单词，然后为每个单词创建一个 span 元素，并设置其样式和内容。如果单词的长度大于 5，那么就给该 span 元素添加 .highlight 类名，以便设置高亮颜色和加粗字体样式。

最后，我们将所有 span 元素插入到无标签文本元素中，并为第一个和最后一个 span 元素添加 .before 和 .after 类名，用于显示标记符号。

使用 JavaScript 替换文本

除了使用 ::before 和 ::after 伪元素外，我们还可以通过 JavaScript 修改文本内容，从而实现样式控制。具体做法是利用正则表达式搜索需要加样式的文本，并将其替换为带有样式的 HTML 片段。下面是一个示例代码：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .highlight {
        color: red;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <p class="text-without-tags">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus vestibulum neque, ac aliquam lorem egestas rhoncus.</p>
    <p class="text-without-tags">Fusce tristique, mi sed fermentum porttitor, enim ligula auctor purus, et blandit nisl risus vel ante.</p>
    <p class="text-without-tags">Cras tempus augue non elit faucibus rutrum. Nullam malesuada bibendum dolor at varius.</p>

    <script>
      // 获取所有无标签文本元素
      const textWithoutTags = document.querySelectorAll('.text-without-tags');

      // 遍历每个无标签文本元素，为其设置样式
      textWithoutTags.forEach((element) => {
        const text = element.textContent;
        const regex = /\b\w{6,}\b/g; // 匹配长度大于 5 的单词
        const styledText = text.replace(regex, (match) => `<span class="highlight">${match}</span>`);
        element.innerHTML = styledText;
      });
    </script>
  </body>
</html>

在上面的代码中，我们首先定义了一个 .highlight 类，用于设置高亮颜色和加粗字体样式。

然后，我们获取所有具有 .text-without-tags 类名的元素，并遍历每个元素。在遍历过程中，我们获取元素的文本内容，并使用正则表达式搜索长度大于 5 的单词。然后，我们将匹配到的单词替换为带有样式的 HTML 片段，并将其设置为元素的 innerHTML。

使用 CSS3 属性选择器

我们还可以利用 CSS3 的属性选择器来选取文本并设置样式。具体做法是给含有需要变色文本的父元素添加一个 data-* 属性，然后利用属性选择器选取这些元素，并设置样式。

下面是一个示例代码：

<!DOCTYPE html>
<html>
  <head>
    <style>
      [data-highlight] {
        color: red;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus vestibulum neque, ac aliquam lorem egestas rhoncus.</p>
    <p>Fusce tristique, mi sed fermentum porttitor, enim ligula auctor <span data-highlight="true">purus</span>, et blandit nisl risus vel ante.</p>
    <p>Cras tempus <span data-highlight="true">augue</span> non elit faucibus rutrum. Nullam malesuada bibendum dolor at varius.</p>
  </body>
</html>

在上面的代码中，我们为包含需要变色文本的元素添加了一个 data-highlight 属性，并将其值设置为 true。然后，我们使用属性选择器 [] 来选取这些元素，并设置样式。

需要注意的是，该方法只适用于有固定标记位置的文本。如果需要对整段文本进行样式控制，那么就需要使用前面两种方法之一。

结语

本文介绍了三种在无标签文本中实现 CSS 变色效果的方法。其中，使用 ::before 和 ::after 伪元素和使用 JavaScript 替换文本都可以灵活地处理各种情况，而使用 CSS3 属性选择器则适用于有固定标记位置的文本。在实际开发中，需要根据具体情况来选择合适的方法。

avatar
文章
阅读
粉丝