缩短 URL 以保留开头和结尾(Firebug “Net” 面板样式)
Shorten URL for display with beginning and end preserved (Firebug 'Net' panel style)
我想在表中显示一个URL,同时将其限制为特定的长度。作为一个URL,最好保留最有意义的部分,这些部分往往是开头和结尾。在Firebug"Net"面板中查看长URL时可以看到此功能。
这是一个快速而肮脏的解决方案,但到目前为止它对我来说效果很好,可以很容易地更新为任何个人偏好。它分为两个函数,以实现可读性和重用性。
此函数利用如下所示的shortString
函数。它将 URL 缩短为小于或等于指定的长度 (l),同时保留 URL 的开头和结尾,并在首选字符 (' ', '/', '&') 处截断。
function shortUrl(url, l){
var l = typeof(l) != "undefined" ? l : 50;
var chunk_l = (l/2);
var url = url.replace("http://","").replace("https://","");
if(url.length <= l){ return url; }
var start_chunk = shortString(url, chunk_l, false);
var end_chunk = shortString(url, chunk_l, true);
return start_chunk + ".." + end_chunk;
}
此函数从字符串的开头开始(或结尾,如果 reverse=true),一旦达到可接受的长度,就开始查找要截断的首选停止字符。如果在达到指定长度 (l) 之前未找到停止字符,则返回的字符串将截断为最大长度。
function shortString(s, l, reverse){
var stop_chars = [' ','/', '&'];
var acceptable_shortness = l * 0.80; // When to start looking for stop characters
var reverse = typeof(reverse) != "undefined" ? reverse : false;
var s = reverse ? s.split("").reverse().join("") : s;
var short_s = "";
for(var i=0; i < l-1; i++){
short_s += s[i];
if(i >= acceptable_shortness && stop_chars.indexOf(s[i]) >= 0){
break;
}
}
if(reverse){ return short_s.split("").reverse().join(""); }
return short_s;
}
例
>>> var url = "http://blog.stackoverflow.com/2011/07/its-ok-to-ask-and-answer-your-own-questions/"
>>> shortUrl(url)
"blog.stackoverflow.com/..swer-your-own-questions/"
我有一个非常简单的解决方案。 我对仪表板页面也有类似的要求:
"我们需要一个 URL 缩短器函数,它返回一个 50 个字符的字符串,开头没有 http 或 https,包括 32 个字符,然后是一个省略号,然后是最后 15 个字符。"
因此,shortUrl 函数需要接收长 URL,获取最后 15 个字符 - 从长 url 的长度(与最后一个字符相同)减去 15 的切片中获取切片的开头到结尾。 剪掉 http/https start - 我使用了 replace(),获取接下来的 32 个字符 - substr(),然后返回新的开始 + 省略号 (...) + 结束:
var shortUrl = function(u) {
uend = u.slice(u.length - 15);
ustart = u.replace('http://', '').replace('https://', '').substr(0, 32);
var shorter = ustart + '...' + uend;
alert(shorter);
return shorter;
}
var longUrl = 'http://www.somekoolsite.com/subsite/subsubsite/morefolders/andetc/page.php';
shortUrl(longUrl);
// Result: "www.somekoolsite.com/subsite/sub...andetc/page.php"
我创建了一个适用于 url 和 url 编码的本地文件路径的方法。
function pathShorten (str, maxLength, removeFilename) {
var splitter = str.indexOf('/')>-1 ? '/' : "''",
tokens = str.split(splitter),
removeFilename = !!removeFilename,
maxLength = maxLength || 25,
drive = str.indexOf(':')>-1 ? tokens[0] : "",
fileName = tokens[tokens.length - 1],
len = removeFilename ? drive.length : drive.length + fileName.length,
remLen = maxLength - len - 5, // remove the current lenth and also space for 3 dots and 2 slashes
path, lenA, lenB, pathA, pathB;
//remove first and last elements from the array
tokens.splice(0, 1);
tokens.splice(tokens.length - 1, 1);
//recreate our path
path = tokens.join(splitter);
//handle the case of an odd length
lenA = Math.ceil(remLen / 2);
lenB = Math.floor(remLen / 2);
//rebuild the path from beginning and end
pathA = path.substring(0, lenA);
pathB = path.substring(path.length - lenB);
path = drive + splitter + pathA + "..." + pathB + splitter ;
path = path + (removeFilename ? "" : fileName);
// console.log(tokens, maxLength, drive, fileName, len, remLen, pathA, pathB);
return path;
}
一些例子:
pathShorten("http://ok.some-bookshop.co.uk/books/horror/find.php?q=urge",35,false)
"http://ok.s...orror/find.php?q=urge"
pathShorten("http://ok.some-bookshop.co.uk/books/horror/find.php?q=urge",35,true)
"http://ok.some-book...books/horror/"
pathShorten("file:///C:/Users/johpan/OneDrive/Shared%20favorites/show must go on.mp3",55,false)
"file:///C:/Users/jo...d%20favorites/show must go on.mp3"
pathShorten("file:///C:/Users/johpan/OneDrive/Shared%20favorites/show must go on.mp3",55,true)
"file:///C:/Users/johpan/OneDr...ive/Shared%20favorites/"
相关文章:
- javascript样式的背景颜色在设置时闪烁.ASP.NET
- ASP.Net VB - 显示数据折叠样式
- 通过树向导样式(asp.net mvc)进行移动
- 缩短 URL 以保留开头和结尾(Firebug “Net” 面板样式)
- asp.net 高度属性的元素样式问题
- ASP.NET-如何在页面回发中检索javascript应用的CSS样式
- ASP.NET-回发后保留HTML元素的样式
- 更改ASP.NET下拉框的样式
- 没有MVC或类似功能的ASP.NET的任何脚本/样式表压缩器
- ASP.NET Telerik控件的jQuery样式
- VB.NET Javascript -创建表时设置表行样式
- 不小心,神秘地阻止了ASP中的WCF服务调用错误.. NET按钮单击处理程序通过检查样式属性
- 在asp.net服务器上的JavaScript CSS样式切换器
- 使用asp.net在数据库中保存richtext编辑器文本时删除内联样式
- 在asp.net中样式化facebook按钮
- 如何在asp.net页面上获得元素的样式
- 将样式和脚本添加到ASP.NET web控件(ascx),而不重复包含指令
- 为什么当我使用asp.net中的Response.Write()方法输出javascript代码时,页面中的css样式会
- 自定义下拉列表样式(CSS/JS与ASP.. NET c#连接)
- 不改变样式的asp.net验证器