Javascript 换行第n次出现后剪切字符串(性能)
我目前正试图找到一种在div内部切片新行的有效方法。 我可以使用任何人推荐的任何东西,只要它是高效的,并且不需要任何javascript框架,只需要JQuery 我制作了以下工作原型,但我不知道与其他方法相比,它的效率有多高。Javascript 换行第n次出现后剪切字符串(性能),javascript,jquery,html,css,performance,Javascript,Jquery,Html,Css,Performance,我目前正试图找到一种在div内部切片新行的有效方法。 我可以使用任何人推荐的任何东西,只要它是高效的,并且不需要任何javascript框架,只需要JQuery 我制作了以下工作原型,但我不知道与其他方法相比,它的效率有多高。 (函数($){ $(文档).ready(函数(){ $(“#行”)。在('change',function()上{ $(“#条目”).change() }); $('#Entry')。在('change',function()上{ var_a=$(this).val(
(函数($){
$(文档).ready(函数(){
$(“#行”)。在('change',function()上{
$(“#条目”).change()
});
$('#Entry')。在('change',function()上{
var_a=$(this).val(),
_d='\n',,
_s=$(“#行”).val(),
_t=_a.split(_d).slice(0,_s),
_r=\u t.join(\u d);
$('#Original>div.Data')。文本(_a);
$('#修改>div.Data')。文本(#r);
});
$(“#条目”).val('1行\n2行\n3行\n4行\n5行\n6行\n7行\n8行\n9行\n10行')。更改();
});
})(jQuery)代码>
正文{
字体系列:Roboto;
}
.数据{
空白:预包装;
}
.头衔{
字体大小:20px;
字号:600;
}
.输入{
显示:内联块;
浮动:对;
}
#原创,
#修改,,
#进入,
.输入{
-webkit盒阴影:0 2px 2px 0 rgba(0,0,0,0.14),
0 3px 1px-2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
盒影:0 2px 2px 0 rgba(0,0,0,0.14),
0 3px 1px-2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
填充:10px;
}
.边框框{
-webkit框大小:边框框;
-moz框大小:边框框;
框大小:边框框;
}
w-100{
宽度:100%;
}
要切片的新行数:
被改进的
起初的
您可以使用RegExp
:
let numberOfLines = 3;
let lines = `1 Line
2 Line
3 Line
4 Line
5 Line
6 Line
7 Line
8 Line
9 Line
10 Line`;
let splitter = new RegExp(`(.*?\n){${numberOfLines}}`);
let matches = splitter.exec(lines);
if (matches) console.log(`Lines splited: ${matches[0]}`);
输出:
Lines splitted: 1 Line
2 Line
3 Line
如果有任何模式以某物开头,以\n
结尾,并且重复了numberOfLines
次,匹配的[0]
将是该字符串
实现您的代码
(function($) {
$(document).ready(function() {
$('#Entry, #Original > div.Data').text(`1 Line
2 Line
3 Line
4 Line
5 Line
6 Line
7 Line
8 Line
9 Line
10 Line`);
$('#Lines, #Entry').on('change', function() {
var numberOfLines = $('#Lines').val();
var newModifiedText;
var splitter = new RegExp(`(.*?\n){${numberOfLines}}`);
var matches = splitter.exec($('#Entry').val());
if (!matches) {
newModifiedText = "Not enough lines to be splitted in the 'entries' textbox!";
} else {
newModifiedText = matches[0];
}
$('#Modified > div.Data').text(newModifiedText);
});
});
})(jQuery);
我认为最快的代码应该是避免额外的操作,比如字符串拆分/连接或正则表达式。您可以使用indexOf查找\n,获取感兴趣的最后一个\n索引并执行single.slice()调用。如果您发现所需的\n个字符较少,则只返回完整字符串
function splitLine(str, countLines) {
if (!str) {
return str;
}
if (countLines <= 0) {
return '';
}
let nlIndex = -1;
let newLinesFound = 0;
while(newLinesFound < countLines) {
let nextIndex = str.indexOf('\n', nlIndex + 1);
if (nextIndex === -1) {
return str;
}
nlIndex = nextIndex;
newLinesFound++;
}
return str.slice(0, nlIndex);
}
函数分割线(str,countline){
如果(!str){
返回str;
}
if(countLines)你如何测试效率?我也在研究indexOf,但忘了添加+1。我认为这是最有效的方法。谢谢!