计算去除HTML标签后的文本词数

霞舞

发布时间：2025-10-13 09:49:21

353人浏览过

来源于php中文网

原创

计算去除html标签后的文本词数

本文旨在提供一种可靠的方法，用于计算包含HTML标签的文本字符串中的实际词数。核心思路是先将HTML标签替换为空格，然后通过处理多余空格，最终得到干净的文本字符串，进而准确计算词数。本文将提供详细的步骤和代码示例，帮助开发者解决HTML文本词数统计的难题。

在处理包含HTML标签的文本时，直接计算词数可能会导致错误，因为HTML标签本身不应计入词数。一个常见的问题是，去除HTML标签后，原本被标签分隔的单词可能会连接在一起，导致词数统计不准确。本文将提供一种解决方案，避免这类问题，实现准确的词数统计。

解决方案

核心思路是，首先将HTML标签替换为空格，而不是直接删除。这样可以保留单词之间的分隔符，避免单词连接。然后，通过正则表达式处理多余的空格，确保单词之间只有一个空格。最后，去除字符串首尾的空格，即可得到干净的文本字符串，从而准确计算词数。

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

步骤详解

替换HTML标签为空格:

使用正则表达式 /(]+)>)/ig 匹配所有的HTML标签，并将其替换为空格。
```
let html = "One
Two
Three";
let tmp = html.replace(/(<([^>]+)>)/ig," ");
console.log(tmp); // 输出： " One  Two  Three "
```
这个正则表达式的含义如下：

StickerBaker
免费开源的AI贴纸头像生成工具

下载
- <:>
- ([^>]+): 匹配除了右尖括号之外的任何字符，至少一次。
- >: 匹配右尖括号。
- (]+)>): 将上述匹配组合成一个完整的HTML标签。
- i: 忽略大小写。
- g: 全局匹配，替换所有匹配项。
合并连续空格为一个空格:

使用正则表达式 /\s+/gm 匹配连续的空格，并将其替换为单个空格。
```
tmp = tmp.replace(/\s+/gm, " ");
console.log(tmp); // 输出： " One Two Three "
```
这个正则表达式的含义如下：
- \s+: 匹配一个或多个空白字符（包括空格、制表符、换行符等）。
- g: 全局匹配，替换所有匹配项。
- m: 多行匹配，确保在多行文本中也能正确匹配。
去除首尾空格:

使用正则表达式 ^\s+|\ +$/gm 匹配字符串首尾的空格，并将其删除。
```
tmp = tmp.replace(/^\s+|\ +$/gm, "");
console.log(tmp); // 输出： "One Two Three"
```
这个正则表达式的含义如下：
- ^: 匹配字符串的开头。
- \s+: 匹配一个或多个空白字符。
- |: 或，表示匹配左侧或右侧的模式。
- \ +: 匹配一个或多个空格。
- $: 匹配字符串的结尾。
- g: 全局匹配，替换所有匹配项。
- m: 多行匹配，确保在多行文本中也能正确匹配。
计算词数:

现在，我们可以通过统计空格的数量来计算词数。
```
let count = (tmp.match(/ /g) || []).length + 1; // 加1，因为词数比空格数多1
console.log(count); // 输出： 3
```
这里使用了 tmp.match(/ /g) 来匹配所有的空格。如果字符串中没有空格，match() 方法会返回 null。为了避免 null 导致的错误，使用了 || [] 来确保结果始终是一个数组。最后，将空格的数量加 1，得到词数。

完整代码示例

function countWordsWithoutHTML(html) {
  let tmp = html.replace(/(<([^>]+)>)/ig," ");
  tmp = tmp.replace(/\s+/gm, " ");
  tmp = tmp.replace(/^\s+|\ +$/gm, "");
  let count = (tmp.match(/ /g) || []).length + 1;
  return count;
}

let htmlContent = "One
Two
Three";
let wordCount = countWordsWithoutHTML(htmlContent);
console.log("词数:", wordCount); // 输出： 词数: 3

注意事项