diff --git a/src/components/AttrCard.vue b/src/components/AttrCard.vue
index 579d405..db5c20e 100644
--- a/src/components/AttrCard.vue
+++ b/src/components/AttrCard.vue
@@ -7,14 +7,26 @@ import DraggableCard from './DraggableCard.vue';
 
 const props = withDefaults(defineProps<{ focusNode: RawNode }>(), {});
 
+const lenAttrNames = [`text`, `desc`];
 const attrs = computed(() => {
-  return Object.entries(props.focusNode.attr).map(([name, value]) => {
-    value = JSON.stringify(value);
-    return {
-      name,
-      value,
-    };
-  });
+  return Object.entries(props.focusNode.attr)
+    .map(([name, value]) => {
+      const attr = {
+        name,
+        value: JSON.stringify(value),
+      };
+      if (lenAttrNames.includes(name)) {
+        return [
+          attr,
+          {
+            name: name + `.length`,
+            value: JSON.stringify((value as string)?.length || null),
+          },
+        ];
+      }
+      return attr;
+    })
+    .flat();
 });
 </script>
 
diff --git a/src/utils/selector.ts b/src/utils/selector.ts
index cef2c27..6f27c8f 100644
--- a/src/utils/selector.ts
+++ b/src/utils/selector.ts
@@ -4,7 +4,13 @@ const { CommonSelector, CommonTransform } = SelectorKit;
 
 const transform = new CommonTransform<RawNode>(
   (node, name) => {
-    return Reflect.get(node.attr, name);
+    const [key, subKey] = name.split('.');
+    if (subKey) {
+      // @ts-ignore
+      return node.attr[key]?.[subKey];
+    }
+    // @ts-ignore
+    return node.attr[key];
   },
   (node) => node.attr.name,
   (node) => node.children,