Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/467.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 换行第n次出现后剪切字符串(性能)_Javascript_Jquery_Html_Css_Performance - Fatal编程技术网

Javascript 换行第n次出现后剪切字符串(性能)

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(

我目前正试图找到一种在div内部切片新行的有效方法。 我可以使用任何人推荐的任何东西,只要它是高效的,并且不需要任何javascript框架,只需要JQuery

我制作了以下工作原型,但我不知道与其他方法相比,它的效率有多高。

(函数($){
$(文档).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。我认为这是最有效的方法。谢谢!