HTML节点树

这篇博客介绍了如何使用TreeBuilder类从HTML文本构建节点树,详细讲解了节点类、属性类以及相关工具类的实现,旨在方便进行HTML结构的解析和操作。
摘要由CSDN通过智能技术生成

编写了一些从html文本创建文本树的类,放在这里方便查找
将html树化,需要创建节点结构和标签结构对应
查找每个标签的起止位置,创建节点,并创建其内部的子节点。在创建的过程中记录节点的属性、内部文本
节点需要提供丰富、方便的方法,否则树化的意义不大。要像js那样提供查找子节点、获取属性、获取内部文本等方法。

TreeBuilder 通过html文本创建实例。通过build方法建立树结构,返回根节点
package treeer;

import util.StringUtil;
/**将html文本树化*/
public class TreeBuilder {
   
   String src;
   StringUtil stringUtil;
   public TreeBuilder(String src){
   
      this.src=src;
      stringUtil=new StringUtil(src);
   }
   public Node build(){
   
      Node node=new Node();
      node.name="root";
      findNodes(0,src.length(),node);
      return node;
   }
   public void findNodes(int start,int end,Node parent){
   
      int tagEnd=start;
      while (tagEnd!=-1&&tagEnd<end){
   
         start=stringUtil.findNext('<',tagEnd,true);
         if(start==-1||start>=end)break;
         tagEnd=findNode(start,parent);
         if(tagEnd==0)break;
      }
   }
   /**找到标签的结尾位置
    * @param start 标签的开始位置
    * @return 标签的结束位置*/
   public int findNode(int start,Node parent){
   
      int afterStart=stringUtil.findNoSpace(start);
      Node node=new Node();
      int end;
      int matchPair = stringUtil.findMatchPair(start);
      int nameEnd=stringUtil.findNext(' ',start,true);
      if(nameEnd==-1||nameEnd>matchPair)nameEnd=matchPair;
      String name;
      int attrEnd=matchPair;
      int beforeMatchPair = stringUtil.findBackNoSpace(matchPair);
      if(src.charAt(beforeMatchPair)=='/'){
   
         //</>形式的标签
         end=matchPair+1;
         attrEnd=beforeMatchPair;
         if(nameEnd==matchPair)nameEnd=beforeMatchPair;
         name=src.substring(afterStart,nameEnd);;
      }else {
   
         //<></>形式的标签
         name=src.substring(afterStart,nameEnd);
         int findStart=matchPair;
         //可能嵌套了相同名称的子标签
         int sameNameSonCount=0;
         while (true){
   
            int endTagStart=stringUtil.findNext('<',findStart,true);
         if (endTagStart==-1){
   
            //找不到对应的</>,返回<>的结束位置
            return matchPair+1;
         }
         int afterEndTagStart=stringUtil.findNoSpace(endTagStart);
         if(src.charAt(afterEndTagStart)!='/'){
   
            //不是结束标签
            if (src.startsWith(name,afterEndTagStart))sameNameSonCount++;
            findStart=afterEndTagStart;
            continue;
         }
         int endTagContent= stringUtil.findNoSpace(afterEndTagStart);
         if(src.startsWith(name, endTagContent)){
   
            if(sameNameSonCount==0){
   
            end=stringUtil.findNext('>',endTagContent,true)+1;
            //标签内文字
            String inside=src.substring(matchPair+1,endTagStart);
            node.inside=inside;
            findNodes(matchPair+1,endTagStart,node);
            break;
            }else {
   
               sameNameSonCount--;
            }
         }
            findStart=endTagContent;
         }
      }
      String attrText=null;
      if(attrEnd>nameEnd+1)
      attrText=src.substring(nameEnd+1,attrEnd);
      node.name=name;
      node.src=src.substring(start,end);
      analyseAttrForNode(node,attrText);
      parent.addSon(node);
      return end;
   }
   private void analyseAttrForNode(Node node,String attrText){
   
      if(attrText==null||attrText.equals(""))return;
      StringUtil attrStringUtil=new StringUtil(attrText);
      int attrStart=0;
      int attrEnd=0;
      while (attrEnd<attrText.length()) {
   
         int assertSign = attrStringUtil.findNext('=', attrStart, true);
         if (assertSign == -1) return;//没有属性
         attrEnd = attrStringUtil.findNext(' ', assertSign, true);
         if (attrEnd == -1) attrEnd = attrText.length();
         String name = attrText.substring(attrStart, assertSign);
         String value = attrText.substring(assertSign + 1, attrEnd);
         Attr attr=new Attr(name,
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element UI是一套基于Vue.js的UI组件库,提供了丰富的组件和功能,其中也包括了形组件(Tree)。要设置节点隐藏,可以通过以下步骤实现: 1. 首先,确保已经正确引入Element UI库和相关组件。 2. 在Vue组件中,使用`<el-tree>`标签创建形组件,并绑定数据源。 3. 在数据源中,为每个节点添加一个`visible`属性,用于控制节点的显示与隐藏。可以在初始化数据时设置所有节点的`visible`为`true`。 4. 在形组件中,使用`node-key`属性指定节点的唯一标识字段。 5. 使用`scoped slot`来自定义节点的显示方式。在`<el-tree>`标签内部,使用`<template slot-scope="scope">`来定义节点的显示内容。 6. 在自定义节点的显示内容中,使用`v-if`或者`v-show`指令来根据节点的`visible`属性控制节点的显示与隐藏。 下面是一个示例代码: ```html <template> <div> <el-tree :data="treeData" :node-key="nodeKey"> <template slot-scope="scope"> <span v-if="scope.node.visible">{{ scope.node.label }}</span> </template> </el-tree> </div> </template> <script> export default { data() { return { treeData: [ { label: '节点1', visible: true, children: [ { label: '子节点1', visible: true }, { label: '子节点2', visible: false } ] }, { label: '节点2', visible: true } ], nodeKey: 'label' }; } }; </script> ``` 在上述示例中,形组件的每个节点都有一个`visible`属性,通过该属性来控制节点的显示与隐藏。在自定义节点的显示内容中,使用`v-if`指令来判断节点的`visible`属性,只有当`visible`为`true`时才显示节点
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值