修改标签前两个单词的字体大小：JavaScript 教程-js教程-PHP中文网

修改标签前两个单词的字体大小：JavaScript 教程

霞舞

发布： 2025-10-06 09:44:26

原创

178人浏览过

修改 标签前两个单词的字体大小：<a style= javascript 教程" /> 标签前两个单词的字体大小：javascript 教程" />

本文将介绍如何使用 JavaScript 获取 标签中的前两个单词，并修改它们的字体大小。通过提取 标签的文本内容，将其分割成单词数组，然后选取前两个单词进行样式修改，从而实现对特定文本的精准控制。文章将提供详细的代码示例和步骤说明，帮助开发者轻松掌握这一技巧。

使用 JavaScript 修改 标签前两个单词的字体大小

本教程将指导您如何使用 JavaScript 改变 标签中前两个单词的字体大小。核心思路是：首先获取 标签的引用，然后提取其文本内容，将文本分割成单词数组，最后选取前两个单词，并将它们包裹在 标签中，并设置相应的样式。

步骤 1：获取 标签的引用

首先，需要使用 document.querySelector() 方法获取 标签的引用。假设您的 HTML 代码如下：

立即学习“Java免费学习笔记（深入）”；

<p>My name is muhammad hamd</p>

登录后复制

对应的 JavaScript 代码如下：

const p = document.querySelector("p");

登录后复制

步骤 2：提取文本内容并分割成单词数组

接下来，使用 textContent 属性获取 标签的文本内容，并使用 split() 方法按照空格将文本分割成单词数组。

let text = p.textContent;
let words = text.split(/\s+/g);

登录后复制

在这里，/\s+/g 是一个正则表达式，用于匹配一个或多个空格。g 标志确保匹配整个字符串。

图改改

在线修改图片文字

455

查看详情

步骤 3：选取前两个单词并修改样式

现在，您可以选取数组中的前两个单词，并将它们包裹在 标签中，并设置 font-size 样式。为了方便操作，我们将创建一个函数来实现这个功能。

function highlightFirstTwoWords(paragraph, fontSize) {
  let text = paragraph.textContent;
  let words = text.split(/\s+/g);

  if (words.length >= 2) {
    let firstTwoWords = words.slice(0, 2).join(" ");
    let remainingWords = words.slice(2).join(" ");

    paragraph.innerHTML = `<span style="font-size: ${fontSize};">${firstTwoWords}</span> ${remainingWords}`;
  } else {
    // 如果单词数量少于两个，则直接设置整个段落的样式
    paragraph.style.fontSize = fontSize;
  }
}

登录后复制

步骤 4：调用函数

最后，调用 highlightFirstTwoWords() 函数，并传入 标签的引用和所需的字体大小。

const p = document.querySelector("p");
highlightFirstTwoWords(p, "24px");

登录后复制

完整的代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>修改段落前两个单词的字体大小</title>
</head>
<body>
  <p>My name is muhammad hamd</p>

  <script>
    function highlightFirstTwoWords(paragraph, fontSize) {
      let text = paragraph.textContent;
      let words = text.split(/\s+/g);

      if (words.length >= 2) {
        let firstTwoWords = words.slice(0, 2).join(" ");
        let remainingWords = words.slice(2).join(" ");

        paragraph.innerHTML = `<span style="font-size: ${fontSize};">${firstTwoWords}</span> ${remainingWords}`;
      } else {
        // 如果单词数量少于两个，则直接设置整个段落的样式
        paragraph.style.fontSize = fontSize;
      }
    }

    const p = document.querySelector("p");
    highlightFirstTwoWords(p, "24px");
  </script>
</body>
</html>

登录后复制

注意事项：