如何提取<p>标签文本内容的最后一个单词（排除</p>标签）

需求说明 #

需要从类似 <p> 可为任意内容 </p> 的HTML片段中，提取<p>标签内部文本的最后一个单词，结果不能包含</p>标签。比如示例中的 <p> timmy:tampa </p>，需提取出对应目标内容。

解决步骤及JavaScript代码 #

原代码中thetag[-1]的写法不符合JavaScript语法，DOM元素无法通过负索引直接访问，以下是修正后的实现方案：

1. 先获取目标<p>元素的纯文本内容，去除首尾空白
2. 将文本按空白字符分割为单词数组
3. 取数组最后一个元素即为目标单词

基础实现代码：

// 假设thetag是包含目标p标签的容器元素
thetag.innerHTML = `<p> timmy:tampa </p>`;
// 获取p元素
const pTag = thetag.querySelector('p');
// 获取纯文本并去除首尾空白
const textContent = pTag.textContent.trim();
// 按任意空白字符分割成单词数组，取最后一个
const lastWord = textContent.split(/\s+/).pop();
console.log(lastWord); // 输出 "timmy:tampa"

如果需要按特定分隔符（比如冒号）提取最后一段内容，可调整分割规则：

// 按冒号分割并取最后一段，再去除空白
const lastSegment = textContent.split(':').pop().trim();
console.log(lastSegment); // 输出 "tampa"

关键说明 #

• 必须通过querySelector、getElementsByTagName等方法获取目标<p>元素，不能直接用负索引访问DOM元素集合
• 使用textContent获取纯文本，避免HTML标签干扰
• trim()用于清除文本首尾的空白字符，防止分割出无效的空字符串
• split(/\s+/)可匹配任意数量的空白字符（空格、换行等），确保正确分割单词

内容的提问来源于stack exchange，提问作者Filipp