- mongodb - 在 MongoDB mapreduce 中,如何展平值对象?
- javascript - 对象传播与 Object.assign
- html - 输入类型 ="submit"Vs 按钮标签它们可以互换吗?
- sql - 使用 MongoDB 而不是 MS SQL Server 的优缺点
有没有人有更复杂的解决方案/库来使用 JavaScript chop 字符串并在末尾添加省略号,而不是显而易见的:
if (string.length > 25) {
string = string.substring(0, 24) + "...";
}
最佳答案
本质上,您检查给定字符串的长度。如果它比给定长度 n
长,则将其剪辑为长度 n
(substr
或 slice
)并添加 html实体 …
(...) 到剪切的字符串。
这样的方法看起来像
function truncate(str, n){
return (str.length > n) ? str.slice(0, n-1) + '…' : str;
};
如果“更复杂”是指在字符串的最后一个单词边界处 chop ,则需要进行额外检查。首先将字符串剪辑到所需的长度,然后将结果剪辑到最后一个单词的边界
function truncate( str, n, useWordBoundary ){
if (str.length <= n) { return str; }
const subString = str.slice(0, n-1); // the original check
return (useWordBoundary
? subString.slice(0, subString.lastIndexOf(" "))
: subString) + "…";
};
您可以使用您的函数扩展原生 String
原型(prototype)。在这种情况下,应删除 str
参数,并将函数中的 str
替换为 this
:
String.prototype.truncate = String.prototype.truncate ||
function ( n, useWordBoundary ){
if (this.length <= n) { return this; }
const subString = this.slice(0, n-1); // the original check
return (useWordBoundary
? subString.slice(0, subString.lastIndexOf(" "))
: subString) + "…";
};
更多教条的开发者可能会为此强烈谴责你(“不要修改你不拥有的对象”。不过我不介意)。
一种不扩展 String
原型(prototype)的方法是创建您自己的辅助对象,包含您提供的(长)字符串以及前面提到的 chop 它的方法。这就是片段下面是。
const LongstringHelper = str => {
const sliceBoundary = str => str.substr(0, str.lastIndexOf(" "));
const truncate = (n, useWordBoundary) =>
str.length <= n ? str : `${ useWordBoundary
? sliceBoundary(str.slice(0, n - 1))
: str.slice(0, n - 1)}…`;
return { full: str, truncate };
};
const longStr = LongstringHelper(`Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum`);
const plain = document.querySelector("#resultTruncatedPlain");
const lastWord = document.querySelector("#resultTruncatedBoundary");
plain.innerHTML =
longStr.truncate(+plain.dataset.truncateat, !!+plain.dataset.onword);
lastWord.innerHTML =
longStr.truncate(+lastWord.dataset.truncateat, !!+lastWord.dataset.onword);
document.querySelector("#resultFull").innerHTML = longStr.full;
body {
font: normal 12px/15px verdana, arial;
}
p {
width: 450px;
}
#resultTruncatedPlain:before {
content: 'Truncated (plain) n='attr(data-truncateat)': ';
color: green;
}
#resultTruncatedBoundary:before {
content: 'Truncated (last whole word) n='attr(data-truncateat)': ';
color: green;
}
#resultFull:before {
content: 'Full: ';
color: green;
}
<p id="resultTruncatedPlain" data-truncateat="120" data-onword="0"></p>
<p id="resultTruncatedBoundary" data-truncateat="120" data-onword="1"></p>
<p id="resultFull"></p>
最后,您只能使用 css 来 chop HTML 节点中的长字符串。它使您的控制更少,但很可能是可行的解决方案。
body {
font: normal 12px/15px verdana, arial;
margin: 2rem;
}
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 30vw;
}
.truncate:before{
content: attr(data-longstring);
}
.truncate:hover::before {
content: attr(data-longstring);
width: auto;
height: auto;
overflow: initial;
text-overflow: initial;
white-space: initial;
background-color: white;
display: inline-block;
}
<div class="truncate" data-longstring="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."></div>
关于javascript - chop 长字符串的聪明方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1199352/
Closed. This question is opinion-based。它当前不接受答案。
我知道如何创建和编写我自己的安装程序,但我需要在某些时候被重定向。这一点我肯定也会启发其他人。 我创建了一个安装项目。一切都完成了。 EXE 中的安装文件除外。 我知道有两种不同的方法: 在 EXE
重复 What is a PHP Framework?and many more 到目前为止,我一直在使用 PHP 进行小的调整,主要是使用 WordPress。什么是 PHP 框架?为什么我需要它们
我刚刚发现 String#split 有以下奇怪的行为: "a\tb c\nd".split => ["a", "b", "c", "d"] "a\tb c\nd".split(' ') => ["a
我是一名优秀的程序员,十分优秀!