Get Rel Path


<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body * {
    display: block;
    font-size: 16px;
    margin: .5em 0;
    width: 100%;
}
p {
    text-align: center;
}
</style>
<script type="module">
 
var relPath = (from, to)=>{
    var [arryF, arryT] = [from.split('/'), to.split('/')];
    var pname = arryT.pop();
    var pathT = arryT.join('/');
    var path = '';
    while(!~pathT.indexOf(arryF.join('/'))) arryF.pop(), path += "../";
    var pathA = arryT.slice(arryF.length);
    if(pathA.length) (path += pathA.join('/') + '/');
    return path + pname;
};
var f = document.forms.url;
[f.from, f.to].forEach(v=>{
    v.addEventListener('input', e=>{
        f.result.value = relPath(f.from.value, f.to.value);
    })
});
 
// default
f.from.value = 'http://topia.wdfiles.com/local--code/get-relative-path/1';
f.to.value = 'http://topia.wdfiles.com/local--files/get-relative-path/gradient.png';
f.result.value = relPath(f.from.value, f.to.value);
 
</script>
</head>
<body>
<form name="url">
<b>from:</b>
<input type="text" name="from" placeholder="from" />
<b>to:</b>
<input type="text" name="to" placeholder="to" />
<p></p>
<b>result:</b>
<textarea name="result" readonly placeholder="result"></textarea>
</form>
</body>
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License