Question

我有一个很长的文字，想在一个单独的<div class="line"></div>中围绕它的每个13个单词。然后将输出存储在字符串中。

initialString = $('#about_text').text(); // This is long & can vary in length

function(?)

finalString = ? // What I need to display

此外，如果我把代码作为一个函数，那将是很好的。所以，我可以通过给它initialString在任何地方使用它。像这样：function(initialString) {...

结果：

<div class="line">1ST_13_WORDS_OF_THE_STRING</div>
<div class="line">NEXT_13_WORDS_OF_THE_STRING</div>
<div class="line">NEXT_13_WORDS_OF_THE_STRING</div>
...

Answer 1

我即时创建的自发方法（在O（n）中执行，与当前答案相比，可能是最有效的内存方式）：

function processString(input) {
    var result = '';
    var words = input.split(' ');
    for(var i = 0; i < words.length; i++) {
        if(i % 13 == 0) result += '<div class="line">';
        result += words[i] + ' ';
        if((i + 1) % 13 == 0 || (i + 1) == words.length) result += '</div>';
    }
    return result;
}

var input = 'This is just a test string that repeats itself. This is just a test string that repeats itself. This is just a test string that repeats itself.';
var result = processString(input);
console.log(result);

输出/结果：

<div class="line">This is just a test string that repeats itself. This is just a </div>
<div class="line">test string that repeats itself. This is just a test string that repeats </div>
<div class="line">itself. </div>

<强>更新

更复杂的解决方案，但它可能接近实现它的最有效方式：

function processString(input) {
    input = input.trim();
    var result = '<div class="line">';
    var counter = 0;
    var character;
    for(var i = 0; i < input.length; i++) {
        character = input.charAt(i);
        if(character == ' ') {
            counter++;
            if(counter % 13 == 0)
                result += '</div><div class="line">';
        }
        result += character;
    }
    result += '</div>';
    return result;
}

在O（n）中执行，不会分配任何不必要的数组/字符串/对象。

Answer 2

要实现此目的，您可以将字符串拆分为较小的数组，这些数组包含您要将它们全部重新组合并添加所需的<div>元素之前要分隔的单词数。试试这个：

var arr = input.split(' '), chunks = [], chunkSize = 13;
for (var i = 0; i < arr.length; i += chunkSize) {
  chunks.push('<div class="line">', arr.slice(i, i + chunkSize).join(' '), '</div>');
}

＆＃13;

var input = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel vehicula quam, sit amet dignissim magna. Mauris iaculis pretium enim at tincidunt. Curabitur dapibus facilisis tincidunt. Aliquam erat volutpat. Aliquam lobortis lacus at risus mollis consectetur. Duis vel sem in purus laoreet maximus. Sed tempor venenatis tellus, vel blandit nunc suscipit a. Aenean et laoreet mi. Fusce eget lectus purus. Vivamus ultrices velit faucibus ex tristique pulvinar. Sed imperdiet sapien sapien, vitae hendrerit lacus lobortis quis. Fusce purus eros, luctus ac vehicula sed, interdum pharetra orci.";

function splitLines(input) {
  var arr = input.split(' '), chunks = [], chunkSize = 13;
  for (var i = 0; i < arr.length; i += chunkSize) {
    chunks.push('<div class="line">', arr.slice(i, i + chunkSize).join(' '), '</div>');
  }
  return chunks.join('');
}

$('div').html(splitLines(input));

＆＃13;

.line {
  background-color: yellow;
  margin-bottom: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

＆＃13;

Answer 3

这是更具可读性的方法。它可能不如循环那样高效，但除非你在具有数万个单词的字符串上运行它，否则这可能不是问题。

const string =＆＃39;一二三四五六七八八十一十一十二十三十四十五＆＃39 ;;

function parse(string) {
  let array = string.split(' ').reduce((prev, cur) => {
    prev.current = (prev.current || 1);
    prev.count = (prev.count || 0) + 1;
    prev[prev.current] = (prev[prev.current] || []);
    prev[prev.current].push(cur);
    if(prev.count % 13 === 0) {
      prev.current ++;
    }
    return prev;
  }, {});
  array = Object.keys(array)
    .map(e => {
      if(Array.isArray(array[e])) {
        return array[e].join(' ');
      } else {
        return '';
      }
    })
    .filter(e => {
      return e !== '';
    })
    .map(e => {
      return '<div class="line">' + e + '</div>';
    })
  return array;
}

console.log(parse(string));

这里有一个pen来玩。

用DIV分隔长字符串的每n个单词

3 个答案: