如何提取两个特定单词之间的字符串文本？（含Ajax获取HTML场景）

嘿，我来帮你搞定这个问题！从Ajax拿到的HTML字符串里抠出两个特定单词之间的内容，有两种靠谱的路子，我给你掰扯清楚：

方法一：正则表达式（适合简单场景） #

如果你的两个目标单词是明确的，而且不会被复杂的HTML嵌套、特殊字符干扰，用正则是最快速的选择。

举个实际例子，假设你要提取<head>和</head>之间的内容，或者自定义的单词比如"start-marker"和"end-marker"，可以这么写：

// 假设你的HTML字符串存在这个变量里
const htmlString = '<!DOCTYPE html> <html lang="en"> <head> ... </head> <body> ... </body>';

// 定义正则规则：匹配"特定单词1"和"特定单词2"之间的所有内容
// 注意：如果单词里有正则特殊字符（比如.、*、(），要加反斜杠转义，或者用RegExp.escape()（ES2021+支持）
const regex = /<head>([\s\S]*?)<\/head>/;
const matchResult = htmlString.match(regex);

// 提取到的内容会在matchResult[1]里，没有匹配到就返回空字符串
const extractedContent = matchResult ? matchResult[1] : '';
console.log(extractedContent);

这里的[\s\S]*?是关键：\s匹配空白字符，\S匹配非空白字符，合起来就是匹配任意字符（包括换行），后面的?是「非贪婪模式」，能避免把所有内容匹配到最后一个目标单词才停止。

方法二：DOM解析（适合复杂HTML，更稳妥） #

正则处理HTML很容易踩坑——比如遇到嵌套标签、特殊字符转义，正则就容易匹配出错。这时候用DOM解析就靠谱多了，毕竟浏览器本身就是干解析HTML的活儿的。

思路是把HTML字符串转换成真实的DOM节点，然后用DOM API来定位和提取内容：

const htmlString = '<!DOCTYPE html> <html lang="en"> <head> ... </head> <body> <div class="container"> ... </div> <div id="overlay"></div>';

// 创建一个临时的div容器，用来装解析后的HTML
const tempContainer = document.createElement('div');
tempContainer.innerHTML = htmlString;

// 例子1：提取<head>标签里的所有内容
const headContent = tempContainer.querySelector('head').innerHTML;

// 例子2：如果要找包含特定单词的元素之间的内容，比如找包含"container"的div和"overlay"的div之间的节点
const startEl = tempContainer.querySelector('.container');
const endEl = tempContainer.querySelector('#overlay');

// 遍历startEl之后到endEl之前的所有节点，收集内容
let currentNode = startEl.nextSibling;
const contentBetween = [];
while (currentNode && currentNode !== endEl) {
  if (currentNode.nodeType === Node.TEXT_NODE) {
    contentBetween.push(currentNode.textContent.trim());
  } else if (currentNode.nodeType === Node.ELEMENT_NODE) {
    contentBetween.push(currentNode.outerHTML);
  }
  currentNode = currentNode.nextSibling;
}
console.log(contentBetween.join(''));

这种方法的好处是完全遵循HTML的结构规则，不管嵌套多复杂，都能准确解析，不会出现正则那种“误匹配”的情况。

额外提醒 #

如果是在Node.js环境下（没有浏览器DOM），可以用jsdom这个库来模拟浏览器的DOM环境，用法和上面的代码几乎一样，先安装npm install jsdom，然后引入使用就行。

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