使用 JavaScript 修改标签中前两个单词的样式-js教程-PHP中文网

使用 JavaScript 修改标签中前两个单词的样式

碧海醫心

发布： 2025-10-06 08:15:00

原创

1003人浏览过

使用 JavaScript 修改 标签中前两个单词的样式标签中前两个单词的样式 " />

本文旨在提供一个清晰的 JavaScript 教程，演示如何精准选取 标签内的前两个单词，并对其进行样式修改。通过拆解步骤，结合代码示例，详细讲解了如何利用 DOM 操作和字符串处理技巧实现这一目标，帮助开发者灵活控制网页文本的呈现效果。

在 web 开发中，有时我们需要对特定段落的某些部分进行特殊样式处理。本教程将介绍如何使用 javascript 来定位 标签中的前两个单词，并修改它们的样式，例如改变字体大小。

步骤详解

获取 元素引用:

首先，需要通过 JavaScript 获取到目标 元素的引用。这可以通过 document.querySelector() 方法实现。
```
const p = document.querySelector("p");
```
登录后复制
这段代码会选取页面上的第一个 元素。如果需要选取特定的 元素，可以使用更具体的 CSS 选择器，例如 document.querySelector("#myParagraph")。

立即学习“Java免费学习笔记（深入）”；
获取文本内容:

获取到 元素的引用后，我们需要提取其文本内容。使用 textContent 属性可以获取到元素的所有文本内容，包括子元素的文本。
```
let text = p.textContent;
```
登录后复制
分割字符串为单词数组:

接下来，将文本内容分割成一个单词数组。这可以通过 split() 方法实现。我们需要使用正则表达式来匹配一个或多个空格，以确保正确分割。

百度智能云·曦灵
百度旗下的AI数字人平台

83

查看详情
```
let words = text.split(/\s+/g);
```
登录后复制
- \s+ 是一个正则表达式，表示匹配一个或多个空格。
- g 标志表示全局匹配，即在整个字符串中查找所有匹配项。
提取前两个单词:

现在，words 数组包含了段落中的所有单词。我们可以通过索引访问数组元素，提取前两个单词。
```
let firstWord = words[0];
let secondWord = words[1];

console.log(firstWord, secondWord);
```
登录后复制
修改样式 (示例：改变字体大小):

要修改前两个单词的样式，我们需要将它们包裹在 标签中，并设置相应的样式。以下示例展示如何改变字体大小：
```
let firstTwoWords = firstWord + " " + secondWord;
let remainingText = text.substring(firstTwoWords.length);

p.innerHTML = `${firstTwoWords}${remainingText}`;
```
登录后复制
- 这段代码首先将前两个单词拼接成一个字符串 firstTwoWords。
- 然后，使用 substring() 方法获取剩余的文本内容 remainingText。
- 最后，使用 innerHTML 属性更新 元素的内容，将前两个单词包裹在 标签中，并设置 font-size 样式。

完整代码示例

<!DOCTYPE html>
<html>
<head>
  <title>修改段落前两个单词样式</title>
</head>
<body>

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

  <script>
    const p = document.querySelector("p");
    let text = p.textContent;
    let words = text.split(/\s+/g);

    let firstWord = words[0];
    let secondWord = words[1];

    let firstTwoWords = firstWord + " " + secondWord;
    let remainingText = text.substring(firstTwoWords.length);

    p.innerHTML = `<span style="font-size: 20px;">${firstTwoWords}</span>${remainingText}`;
  </script>

</body>
</html>

登录后复制

注意事项