zoukankan      html  css  js  c++  java
  • Js读取input框的xml文件并由jq解析

    说明

    我文件是cnblogs文章备份导出的xml文件,目的我是想获取导出的xml的每篇文章的信息。

    读取文件

    html文件部分

    <div>xml文件:<input type="file" name="xml" id="xml"></div>
    <br>
    <div><input type="button" id="submit" value="提交"></div>
    

    js部分

    $('#submit').click(function(){
        let obj = document.getElementById("xml");
        let file = obj.files[0];
        let fr = new FileReader();
        fr.readAsText(file);
        fr.onload = function(){
            console.log(fr.result);
        }
    });
    

    读取xml

    xml虽然和html有很多不同,但是可以简答理解为html的严格版本。所以直接使用jq,读取元素的形式,是可以取到里面的内容的。
    比如我想取出,<channel>标签中的<item>,可以这样写。

    $(xml).find('channel item')
    

    xml就是xml的文本,就是上面的fr.result的值。
    结果如下:

    S.fn.init(18) [item, item, item, item, item, item, item, item, item, item, item, item, item, item, item, item, item, item, prevObject: S.fn.init(2)]
    

    下面是其中item中的节点列表。

    childNodes: NodeList(8)
    0: title
    1: link
    2: text
    3: dc:creator
    4: author
    5: pubdate
    6: guid
    7: description
    

    获取处理

    现在打印下读取到item元素。

    // 解析xml格式
    function parseXml(xml){
        $(xml).find('channel item').each(function(index, value){
            console.log(value);
        });
    }
    
    <item>​
      <title>​新版PHP7安装redis扩展并在laravel中运用​</title>​
      <link>​"http://www.cnblogs.com/hxsen/archive/2020/04/20/12739781.html"
      <dc:creator>​houxin​</dc:creator>​
      <author>​houxin​</author>​
      <pubdate>​Mon, 20 Apr 2020 11:02:00 GMT​</pubdate>​
      <guid>​http://www.cnblogs.com/hxsen/archive/2020/04/20/12739781.html​</guid>​
      <description>​…​</description>​
    </item>​
    <item>​…​</item>​
    

    现在,使用如下方式对元素进行取值。

    // 解析xml格式
    function parseXml(xml){
        $(xml).find('channel item').each(function(index, value){
            let title = $(this).find('title').text();
            let link = $(this).find('guid').text();
            let pubDate = $(this).find('pubdate').text();
            let description = $(this).find('description').text();
            console.log(title, link, pubDate);
        });
    }
    
  • 相关阅读:
    Study Plan The TwentySecond Day
    Study Plan The Nineteenth Day
    Study Plan The TwentySeventh Day
    Study Plan The Twentieth Day
    Study Plan The TwentyFirst Day
    python实现进程的三种方式及其区别
    yum makecache
    JSONPath 表达式的使用
    oracle执行cmd的实现方法
    php daodb插入、更新与删除数据
  • 原文地址:https://www.cnblogs.com/hxsen/p/12794673.html
Copyright © 2011-2022 走看看