如何在Visual Studio Code中用TypeScript验证删除线文本Property和Motorcar

需求 #

要在Visual Studio Code编辑器中，用TypeScript验证HTML里带删除线的Property和Motorcar这两个文本。

相关截图说明 #

• 第一张图：显示了带有删除线样式的HTML内容，Property和Motorcar呈现为删除线效果
• 第二张图：展示了VS Code里的TypeScript代码编辑界面，能看到部分待编写的验证逻辑框架

实现思路与代码示例 #

1. 先在VS Code里搭好TypeScript环境：

   • 终端执行 npm init -y 初始化项目，再装TypeScript依赖：npm install typescript --save-dev
   • 配置tsconfig.json，开启DOM类型支持，把compilerOptions里的lib字段设为["ESNext", "DOM"]

2. 编写验证逻辑：

// 抓取页面上所有带删除线的元素（兼容<del>和<s>标签）
const strikeElements = document.querySelectorAll('del, s');
// 遍历验证目标文本
strikeElements.forEach(element => {
  const textContent = element.textContent?.trim() || '';
  if (['Property', 'Motorcar'].includes(textContent)) {
    console.log(`✅ 找到目标删除线文本：${textContent}`);
  } else {
    console.log(`❌ 当前删除线文本不符合要求：${textContent}`);
  }
});

3. 编译运行：
   • 终端敲tsc命令把TypeScript编译成JavaScript，之后在浏览器控制台运行，或者用支持DOM模拟的Node环境执行

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