如何编写脚本批量迁移HTML中a标签外文本至标签内

嘿，手动改几百条链接确实太折磨人了！我给你两个实用方案，分分钟搞定这个重复活儿：

如果你已经在浏览器里打开了要维护的页面，直接用开发者工具的控制台就能完成修改：

1. 按F12打开开发者工具，切换到「Console」标签页
2. 粘贴下面这段代码，回车运行：

// 定位所有包含链接的列表项
const listItems = document.querySelectorAll('li:has(a[href])');

listItems.forEach(item => {
  // 提取a标签之外的纯文本（自动去除多余空格）
  const outerText = Array.from(item.childNodes)
    .filter(node => node.nodeType === Node.TEXT_NODE)
    .map(node => node.textContent.trim())
    .join(' ')
    .trim();
  
  // 只要提取到有效文本，就替换a标签的内容并清理多余节点
  if (outerText) {
    const link = item.querySelector('a');
    link.textContent = outerText;
    // 删除li里没用的文本节点
    Array.from(item.childNodes).forEach(node => {
      if (node.nodeType === Node.TEXT_NODE) {
        node.remove();
      }
    });
  }
});

运行完之后，页面上的链接就会自动变成你想要的格式啦！你可以直接复制修改后的HTML代码，或者如果是可编辑的页面，直接保存即可。

如果你是要批量处理本地的HTML文件，用PHP的DOM解析来操作更合适：

<?php
// 读取目标HTML文件内容（替换成你的文件路径）
$htmlContent = file_get_contents('your-target-page.html');

// 初始化DOM解析器
$dom = new DOMDocument();
// 忽略HTML格式错误，避免解析失败
libxml_use_internal_errors(true);
$dom->loadHTML($htmlContent);
libxml_clear_errors();

$xpath = new DOMXPath($dom);
// 筛选所有包含href属性的a标签所在的li
$listItems = $xpath->query('//li[a[@href]]');

foreach ($listItems as $li) {
    $extractedText = '';
    // 遍历li的子节点，收集所有纯文本内容
    foreach ($li->childNodes as $node) {
        if ($node->nodeType === XML_TEXT_NODE) {
            $extractedText .= trim($node->nodeValue) . ' ';
        }
    }
    $extractedText = trim($extractedText);
    
    if ($extractedText) {
        // 获取li里的链接元素
        $link = $li->getElementsByTagName('a')->item(0);
        // 替换链接的显示文本
        $link->nodeValue = $extractedText;
        // 删除li中多余的文本节点
        foreach ($li->childNodes as $node) {
            if ($node->nodeType === XML_TEXT_NODE) {
                $li->removeChild($node);
            }
        }
    }
}

// 输出修改后的HTML，或者保存到新文件
$modifiedHtml = $dom->saveHTML();
// 保存到文件（替换成你要的输出路径）
file_put_contents('modified-page.html', $modifiedHtml);

echo '修改完成！';
?>

把代码里的文件路径换成你自己的，运行脚本就能得到修改后的HTML文件。如果要批量处理多个文件，套个循环遍历文件夹里的HTML文件就行。

这两个方案都能完美匹配你的需求，选最适合你的场景用就好～

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