uni-app 实现类似Vscode的auto rename tag插件功能

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app 实现类似Vscode的auto rename tag插件功能

当标签改名时，后面的</>标签跟随改名

图片

Harmonyos Next教程
2 回复

如下图，选中要修改的标签，点击菜单【选择相同语法词或配对符号】，再输入要修改内容


在uni-app中实现类似VSCode的Auto Rename Tag插件功能，主要涉及到对编辑器操作或代码高亮插件的集成。然而，由于uni-app主要面向跨平台移动应用开发，并不直接提供像VSCode那样的高级代码编辑功能，所以我们需要通过一些间接手段来实现类似效果。

以下是一个简化的思路，通过监听代码输入事件，动态地同步更新对应的结束标签。虽然这并不能完全替代VSCode插件的复杂功能，但可以作为一个基本的实现示例。

实现思路

  1. 监听文本输入：在编辑器（假设是一个<textarea>或基于monaco-editor等高级编辑器）中监听用户的输入事件。
  2. 解析HTML：使用正则表达式或DOM解析库（如DOMParser）来解析输入的HTML代码。
  3. 同步更新标签：当检测到开始标签的变化时，自动更新对应的结束标签。

代码示例

以下是一个使用原生JavaScript和简单正则表达式的示例，假设在一个<textarea>中实现：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto Rename Tag</title>
</head>
<body>
<textarea id="codeEditor" rows="20" cols="80"></textarea>
<script>
const editor = document.getElementById('codeEditor');

editor.addEventListener('input', () => {
  const content = editor.value;
  const regex = /<(\w+)[^>]*>/g;
  let match;
  const tags = [];

  // Extract opening tags
  while ((match = regex.exec(content)) !== null) {
    tags.push(match[1]);
  }

  // Simplified logic to auto-close tags (for demonstration only)
  let updatedContent = content;
  tags.forEach(tag => {
    const closeTagRegex = new RegExp(`</${tag}>`, 'g');
    const openTagPos = content.lastIndexOf(`<${tag}`);
    const contentAfterOpenTag = content.slice(openTagPos);
    if (!closeTagRegex.test(contentAfterOpenTag)) {
      updatedContent += `</${tag}>`;
    }
  });

  // This would normally require more sophisticated handling to avoid issues
  // such as overwriting user input or incorrectly closing tags in nested structures.
  editor.value = updatedContent;
});
</script>
</body>
</html>

注意

  1. 性能与准确性：上述代码仅用于演示目的，实际项目中需要更复杂的逻辑来处理嵌套标签、属性变化等情况。
  2. 用户体验：直接修改编辑器内容可能会影响用户体验，特别是在用户正在输入时。可以考虑使用提示框或光标位置调整来优化。
  3. 集成到uni-app：由于uni-app主要面向移动端开发，上述代码需要适当修改以适应相应的编辑器组件或插件。

在实际开发中，可能需要借助更强大的代码编辑器库或插件来实现这一功能。

回到顶部