代码之家 › 专栏 › 技术社区 › Matt

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

performance css html jquery javascript

-1

Matt · 技术社区 · 6 年前

我目前正试图找到一种有效的方法来分割分区内的新行。我可以使用任何人推荐的工具,只要它是有效的,并且不需要任何javascript框架,而是jquery。

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

(函数($){
$(document).ready(函数()。{
$('lines').on('change',function()。{
$('entry').change())
(});

$('entry').on('change',function()。{
var _a=$(this).val(),
d='n’,
_ s=$('行').val(),
_ t=_a.split(_d).slice(0,_s),
_ r=_t.连接(_d);

$('original>div.data').text(_a);
$('modified>div.data').text(_r);
(});

$('entry').val('1行\n2行\n3行\n4行\n5行\n6行\n7行\n8行\n9行\n10行').change();
(});
})(jquery);body{
字体系列:roboto;
}

数据{
空白:预包装;
}

标题{
字体大小:20px;
字体粗细:600;
}

输入{
显示:内联块;
浮动:正确;
}

原始的,
修正的
输入,
输入{
-WebKit盒阴影:0 2px 2px 0 rgba(0,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,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%;
}<代码> < /PRE>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>
和DIV & GT;
<DIV class='input'>
要切片的新行数:
<input type=“number”name=“lines”id=“lines”value='2'>
&L/DIV & GT;
<DIV class='W-100'>
<textfarea id=“entry”class=“w-100 border box”rows=“10”></textfarea>
&L/DIV & GT;
&L/DIV & GT;
& BR/>

<div id='modified'>
<DIV class='title'>已修改</DIV>
& BR/>
<DIV class='data'></DIV>
&L/DIV & GT;

& BR/>

<div id='original'>
<DIV class='title'>原始</DIV>
和/或BR>
<DIV class='data'></DIV>
</DIV>.


    
     < / div高效和dosen不需要任何javascript框架,只需要jquery。
     
     
     
      我做了下面的工作原型,但我不知道它与其他方法相比有多有效。
      
       
      
     
     
     
     
     
     
      
       (function($) {
  $(document).ready(function(){
    $('#Lines').on('change', function(){
      $('#Entry').change()
    });
    
    $('#Entry').on('change', function(){
      var _a = $(this).val(),
      _d = '\n',
      _s = $('#Lines').val(),
      _t = _a.split(_d).slice(0, _s),
      _r = _t.join(_d);

      $('#Original > div.Data').text(_a);
      $('#Modified > div.Data').text(_r);
    });
    
    $('#Entry').val('1 Line\n2 Line\n3 Line\n4 Line\n5 Line\n6 Line\n7 Line\n8 Line\n9 Line\n10 Line').change();
  });
})(jQuery);
       body {
  font-family: Roboto;
}

.Data {
  white-space: pre-wrap;
}

.Title {
  font-size: 20px;
  font-weight: 600;
}

.input {
  display: inline-block;
  float: right;
}

#Original,
#Modified,
#Entry,
.input{
  -webkit-box-shadow: 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);
  box-shadow: 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);
  padding: 10px;
}

.border-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.w-100 {
  width: 100%;
}
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class='input'>
    NUMBER OF NEW LINES TO SLICE:
  <input type="number" name="Lines" id="Lines" value='2'>
  </div>
  <div class='w-100'>
    <textarea id="Entry" class="w-100 border-box" rows="10"></textarea>
  </div>
</div>
<br/>

<div id='Modified'>
  <div class='Title'>Modified</div>
  <br/>
  <div class='Data'></div>
</div>

<br/>

<div id='Original'>
  <div class='Title'>Original</div>
  </br>
  <div class='Data'></div>
</div>

2 回复 | 直到 6 年前

dlxeon 6 年前

我认为最快的代码应该是避免额外的操作,如字符串拆分/联接或正则表达式。您可以使用index of找到\n,获取感兴趣的最后一个\n索引,并执行single.slice()调用。如果您发现需要的字符更少,那么只需返回完整的字符串。

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);
}

rnarcos 6 年前

你可以使用 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 时代, matches[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);