练习JS做的一个把书签文件转换成JSON数组的小工具
浏览器导出的书签是html文件写了个JS小工具可以把书签html文件转换成JSON数组方便调用
把代码用记事本保存成 书签小工具.html 然后用浏览器打开就可以用啦
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>(๑•̀ㅂ•́)و</title>
<style type="text/css">.Left,.Right{box-sizing:border-box;overflow:auto;margin:0;padding:20px;border:1px solid #ccc;color:#000;font-size:12px;line-height:20px;height:calc(100vh - 80px);background:#e6e6e6;float:left;width:50%;}a{color:#333;}</style>
<script type="text/javascript">
window.DataArray=[];
function DataArrayCheck(url){
for(var i=0;i<window.DataArray.length;i++)
if(window.DataArray.href==url)return i;
return -1;
}
function InputChange(input){
var reader=new FileReader();
reader.onload=function(event){
var stage=document.querySelector(".Left");
stage.innerHTML=event.target.result;
var list=stage.querySelectorAll("a");
for(var i=0;i<list.length;i++){
var link=list;
var href=link.getAttribute("href");
if(DataArrayCheck(href)<0)window.DataArray.push({"name":link.innerText,"href":href});
}
document.querySelector(".Right").innerText=JSON.stringify(window.DataArray,null,2);
document.title="共计"+String(window.DataArray.length)+"条数据";
};
reader.readAsText(input.files);
}
function TipText(text){
document.querySelector(".Input .Tiper").innerText=text;
setTimeout(function(){document.querySelector(".Input .Tiper").innerText="复制到剪贴板";},2000);
}
function CopyText(text){
var input=document.createElement("input");
input.setAttribute("value",text?text:"");
document.body.appendChild(input);
input.select();
document.execCommand("copy");
document.body.removeChild(input);
return text?text.length:0;
}
function CopyJsonData(){
TipText(window.DataArray.length?CopyText(JSON.stringify(window.DataArray,null,2))?"复制成功":"复制失败":"请先加载数据");
}
</script>
</head>
<body>
<div class="Left"></div>
<pre class="Right" style="float:right;"></pre>
<div class="Input" style="padding:10px 0;clear:both;position:relative;">
<input type="file">
<button class="Tiper" style="position:absolute;right:0;top:50%;transform:translateY(-50%);">复制到剪贴板</button>
</div>
</body>
</html>
本帖最后由 atoms 于 2022-12-9 18:41 编辑
额。。。为什么发的代码里边被自动吞了些内容{:1_925:}
body标签里面是这样的：
谢谢大佬的热心分享。 我这边没用呀，chrome浏览器。 嬉皮笑脸 发表于 2022-12-12 10:45
我这边没用呀，chrome浏览器。
我发的代码被吞了好多 在<body>和</body>之间
所有的onclick和ondbclick里面内容都被吞掉了
原来代码<body>和</body>里面是这样的
<body>
<div class="Left" on去掉我dblclick="document.querySelector('.Input input').click();"></div>
<pre class="Right" on去掉我dblclick="CopyJsonData();" style="float:right;"></pre>
<div class="Input" style="padding:10px 0;clear:both;position:relative;">
<input type="file" on去掉我change="InputChange(this);">
<button class="Tiper" on去掉我click="CopyJsonData();" style="position:absolute;right:0;top:50%;transform:translateY(-50%);">复制到剪贴板</button>
</div>
</body>
把里面的 去掉我 删掉 就可以用了 不知道为什么论坛自动修改了我发的代码 论坛自动删掉了dom的绑定事件
完整版代码是这个 把里面的 去掉我 三个字删掉就可以了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>(๑•̀ㅂ•́)و</title>
<style type="text/css">.Left,.Right{box-sizing:border-box;overflow:auto;margin:0;padding:20px;border:1px solid #ccc;color:#000;font-size:12px;line-height:20px;height:calc(100vh - 80px);background:#e6e6e6;float:left;width:50%;}a{color:#333;}</style>
<script type="text/javascript">
window.DataArray=[];
function DataArrayCheck(url){
for(var i=0;i<window.DataArray.length;i++)
if(window.DataArray.href==url)return i;
return -1;
}
function InputChange(input){
var reader=new FileReader();
reader.onload=function(event){
var stage=document.querySelector(".Left");
stage.innerHTML=event.target.result;
var list=stage.querySelectorAll("a");
for(var i=0;i<list.length;i++){
var link=list;
var href=link.getAttribute("href");
if(DataArrayCheck(href)<0)window.DataArray.push({"name":link.innerText,"href":href});
}
document.querySelector(".Right").innerText=JSON.stringify(window.DataArray,null,2);
document.title="共计"+String(window.DataArray.length)+"条数据";
};
reader.readAsText(input.files);
}
function TipText(text){
document.querySelector(".Input .Tiper").innerText=text;
setTimeout(function(){document.querySelector(".Input .Tiper").innerText="复制到剪贴板";},2000);
}
function CopyText(text){
var input=document.createElement("input");
input.setAttribute("value",text?text:"");
document.body.appendChild(input);
input.select();
document.execCommand("copy");
document.body.removeChild(input);
return text?text.length:0;
}
function CopyJsonData(){
TipText(window.DataArray.length?CopyText(JSON.stringify(window.DataArray,null,2))?"复制成功":"复制失败":"请先加载数据");
}
</script>
</head>
<body>
<div class="Left" on去掉我dblclick="document.querySelector('.Input input').click();"></div>
<pre class="Right" on去掉我dblclick="CopyJsonData();" style="float:right;"></pre>
<div class="Input" style="padding:10px 0;clear:both;position:relative;">
<input type="file" on去掉我change="InputChange(this);">
<button class="Tiper" on去掉我click="CopyJsonData();" style="position:absolute;right:0;top:50%;transform:translateY(-50%);">复制到剪贴板</button>
</div>
</body>
</html>
在<body>和</body>之间 总共四个 去掉我 删掉这4个去掉我后保存成一个utf-8编码的html就可以了
原理就是选择书签html文件后读取内容并显示在左边框框中 然后用JS脚本遍历选择每一个a标签链接 然后获取链接的名称和链接地址 如果这个链接地址没有在结果中存在的话 就添加到结果中 最后在右边框框中显示JSON对象的内容 然后假设把JSON文件保存到了bookmark.json的话
如果想要查看链接的话 可以把这段PHP代码保存到同目录下的bookmark.php文件
可以用PHP读取bookmark.json里面所有内容 然后输出显示到浏览器 这段代码需要有PHP环境才能用 我自己只是整理书签时才用 所有没有做过多的样式 只用了最简单样式展示
<style type="text/css">
a{display:block;float:left;min-width:20%;max-width:50%;font-size:14px;border:1px solid #333;height:30px;line-height:30px;overflow:hidden;box-sizing:border-box;text-align:center;color:#333;text-decoration:none;}
a:hover{background:#eee;}
a:visited{color:blue;}
br{display:none}
</style>
<?php $list=json_decode(file_get_contents("bookmark.json"),1);
foreach($list as $item){
echo '<a href="'.($item["href"]).'" target="_blank">'.htmlspecialchars($item["name"]).'</a>';
} atoms 发表于 2022-12-12 22:12
我发的代码被吞了好多 在和之间
所有的onclick和ondbclick里面内容都被吞掉了
可以转成json了
页:
[1]