程序博客网 > python 画图矢量图

自己动手用javascript写xpath

来源：互联网发布：python 画图矢量图编辑：程序博客网时间：2024/06/07 13:45

自己以前写过一篇文章，是关于dom下xpath的编写，不过那是借助浏览器本身的特性，这次我想用javascrip和正则表达式打造自己的xpath，不多啰嗦，看代码：

function xpath(n,m){
if(//]$/i.test(m)){
  var t1=[]
  var reg=/^(////|//)(.+)/[(.+)/]$/i;
  m.match(reg);
  if(RegExp.$1=="/"){
   var t2=n.childNodes;
   for(var i=0;i<t2.length;i++){
    if(t2[i].nodeType==1 && t2[i].tagName.toLowerCase()==RegExp.$2)
    t1.push(t2[i]);
   }
  }else{
   var t2=n.getElementsByTagName(RegExp.$2);
   for(var i=0;i<t2.length;i++){
    if(t2[i].nodeType==1)
    t1.push(t2[i]);
   }
  }
  if(RegExp.$3.indexOf("='")>-1){
   var reg1=/([/w/d]+)(/^=|/~=|/!=|/$=|=)'(.+)'/i;
   RegExp.$3.match(reg1);
   //alert(RegExp.$3);
   switch(RegExp.$2){
    case "^=":
    for(var i=0;i<t1.length;i++){
     if(!(t1[i].getAttribute(RegExp.$1) && t1[i].getAttribute(RegExp.$1).substr(0,RegExp.$3.length)==RegExp.$3)){
      t1.splice(i,1);
      //alert(i);
      i--;
     }
    }
    break;
    case "$=":
    for(var i=0;i<t1.length;i++){
     if(!(t1[i].getAttribute(RegExp.$1) && t1[i].getAttribute(RegExp.$1).substr(t1[i].getAttribute(RegExp.$1).length-RegExp.$3.length,RegExp.$3.length)==RegExp.$3)){
      t1.splice(i,1);
      i--;
     }
    }
    break;
    case "~=":
    for(var i=0;i<t1.length;i++){
     if(!(t1[i].getAttribute(RegExp.$1) && t1[i].getAttribute(RegExp.$1).indexOf(RegExp.$3)>-1)){
      t1.splice(i,1);
      i--;
     }
    }
    break;
    case "!=":
    for(var i=0;i<t1.length;i++){
     if(!(t1[i].hasAttribute(RegExp.$1)) || (t1[i].hasAttribute(RegExp.$1) && t1[i].getAttribute(RegExp.$1).indexOf(RegExp.$3)==-1)){
      t1.splice(i,1);
      i--;
     }
    }
    break;
    case "=":
    for(var i=0;i<t1.length;i++){
     if(!(t1[i].getAttribute(RegExp.$1) && t1[i].getAttribute(RegExp.$1)==RegExp.$3)){
      t1.splice(i,1);
      i--;
     }
    }
    break;
   }
  }else{
   var reg1=/(!)?([/w/d]+)/i;
   RegExp.$3.match(reg1);
   if(RegExp.$1){
    for (var i = 0; i < t1.length; i++) {
     if(t1[i].getAttribute(RegExp.$2)){
      t1.splice(i,1);
      i--;
     }
    }
   }else{
    for (var i = 0; i < t1.length; i++) {
     if(!(t1[i].getAttribute(RegExp.$2))){
      t1.splice(i,1);
      i--;
     }
    }
   }
  }
}else{
  var t1=[];
  var reg=/^(////|//)(.+)$/i;
  m.match(reg);
  if(RegExp.$1=="/"){
   var t2=n.childNodes;
   for(var i=0;i<t2.length;i++){
    if(t2[i].nodeType==1 && t2[i].tagName.toLowerCase()==RegExp.$2)
    t1.push(t2[i]);
   }
  }else{

   var t2=n.getElementsByTagName(RegExp.$2);
   for(var i=0;i<t2.length;i++){
    if(t2[i].nodeType==1)
    t1.push(t2[i]);
   }
  }
}
return t1;
}

主要实现了：

(/|//)tagname([(!)attr(~|!|$|^)(=data)])

的功能。参数n是你要查找的根节点，m是匹配的xpath表达式。

给个例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Untitled Document</title>
</head>
<body>
  <script src="xpath.js"></script><div id="a"><p>sdfd</p>dsfsd</div>
  <script>
   alert(xpath(document.body,"//div[id='a']")[0].innerHTML="sx");
  </script>


</body>
</html>

主要还是练练手，熟悉下正则表达式，毕竟已经很久没用了，自己的这个xpath还有很多不足，以后自己会多多完善的。

文章有不足之处，还望大家多多指正。

python 画图矢量图

python 画图矢量图

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子液下循环泵液下磁力泵液下砂浆泵液下螺杆泵 fy系列不锈钢液下泵 fys型工程塑料液下泵液臭吧输卵管通液诊疗仪液位测量仪静压液位仪雷达液位仪液位仪磁翻液位计浮球式液位开关液位传感器价格侧装磁翻板液位计价格高温液位开关液位控制开关液位计阀门磁翻板液位计故障磁性翻柱式液位计液位计型号磁致伸缩液位计价格水箱电子液位计投入式液位变送器厂家光电液位传感器压力变送器测液位液位流量计电极式液位计 uhz磁性翻柱液位计翻板式液位计磁翻板液位计原理缆式液位计磁性翻板液位计磁性翻柱液位计水箱液位计液位计图片防腐式液位计船用液位计高温液位计水池液位计