【问题标题】:Create an array of X number of words from javascript String从 javascript String 创建一个包含 X 个单词的数组
【发布时间】:2015-08-31 18:38:06
【问题描述】:

你好 Stack 社区,

我正在尝试实现一个简单的 javascript 函数来首先计算给定字符串值中的单词总数。

在此之后,我不想将 X 个单词存储到一个数组中,以便能够在其周围添加额外的 html 元素进行循环。

例如,我有这个字符串:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat sollicitudin lacus, nec pulvinar quam scelerisque at. Phasellus ut tellus scelerisque, fringilla ligula a, commodo odio. Aenean mattis eros sed purus iaculis, at pellentesque ligula luctus. Pellentesque luctus augue ut quam consequat rhoncus. In at dolor sed ipsum ullamcorper fermentum. Pellentesque porta convallis nisl vitae cursus. Maecenas luctus libero sit amet efficitur consequat. Suspendisse nec luctus dolor. Fusce sit amet scelerisque erat. Aenean ac tristique nisl. Etiam in est purus. In magna nunc, viverra nec ante quis, aliquam venenatis sem.

这是我实际正在处理的代码。 (我只是参加了所需的部分)。

// Var for Word max
    var wordsMaxFirstPage = 40;
    var wordsMaxOthersPages = 50;

    // Default field (My String example)
    var defaultField = $(this).find('.c_6937 .textarea .value');

    // Count the number of words for this form
    var countLengthOfCommentPage = defaultField.text().split(' ').length;

    // Creat Array of the comment splits by Maximum words per page
    var chunks = [];
    for (var i = 0, charsLength = countLengthOfCommentPage; i < charsLength; i += wordsMaxFirstPage) {
        chunks.push(defaultField.html().substring(i, i + wordsMaxOthersPages));
    }


    // Execute Array to build the new HTML
    for (var key in chunks) {
        if (chunks.hasOwnProperty(key)) {

            $(this).find('.c_6937').append('<div class="value line_'+key+'" style="font-size: 20px; margin: 0px; line-height: 26px; font-family: Times, serif; font-weight: normal;">' + chunks[key] + '</div>');

            console.log(key + " -> " + chunks[key]);
        }
    }


    // Debug
    console.log(countLengthOfCommentPage);

对我来说,事情变得复杂的地方是我构建数组的地方。是的,我知道,我使用 substring 方法,这种方法实际上适用于字符。

我的问题很简单。有没有办法用正则表达式函数构建数组,还是我错过了一些非常简单的东西?

【问题讨论】:

标签: javascript arrays regex


【解决方案1】:

实际上您已经在创建数组,但没有保存它;)。

Javascript 中的split() 函数拆分给定的字符串并创建一个包含结果片段的数组。

我建议替换这一行:

var countLengthOfCommentPage = defaultField.text().split(' ').length;

这两个:

var chunks = defaultField.text().split(' ');
var countLengthOfCommentPage = chunks.length;

如果这能解决您的问题,请告诉我。

更新

我的第一个建议是在每个 chunks 元素中给你一个单词,这不是你的情况的解决方案。

您发布的原始代码的问题是构建数组的循环没有考虑每个单词的长度。

你可以这样构建数组:

// split the text into separate words
var words = defaultField.text().split(' ');

//read total number of words
var totalWordsCount = words.length;
//maximum number of words per page allowed, set to 10 as example
var wordsCountPerPage = 10;
var chunks = [];

// in each iteration "i" points to the first word in the new page, so it's 0, 11, 21 etc.
for (var i = 0; i < totalWordsCount; i+=wordsCountPerPage) {
    //'slice()' function gets words for the current line, then they're concatenated with 'join()'
    //'Math.min()' function is used to make sure that appropriate number of words are taken for the last page
    chunks.push(words.slice(i, Math.min(i+wordsCountPerPage, totalWordsCount)).join(' '));
}

我已经更新了 jsFiddle,它似乎可以按预期工作。如果这能解决您的问题,请告诉我。

更新 II

在 cmets 中,您还要求在达到每页字数限制之前检测最后一句的结尾,以便尽可能在页面上显示完整的句子。此 jsFiddle 已更新为以这种方式工作:http://jsfiddle.net/gbb2ae4g/17/。这个想法是以类似于以前版本的方式找到预期的页面结尾,然后搜索以 dot 结尾的最后一个单词并相应地调整页面上的单词数。此代码假定 dot 后面总是跟着一个 space 字符,除非它是文本中的最后一个字符。

我还更新了作为上一个答案给出的代码(第一次更新),因为它错误地执行了页尾检查。

【讨论】:

  • 实际上,如果我使用你的答案,我可以保存我的 chunks 数组,但它给我数组中的每个单词一行。在我的代码中,我希望数组中每行 40 个字。
  • 如果你去看my latest jsFiddle,你会看到我确实保存了数组,但它每行一个字。
  • 我已经用更新的 jsFiddle 的链接更新了答案。
  • 我看到你在设法解决这个问题 Lukasz M 的好方法。我以某种方式将测试推向了更大的值。示例:一个 1000 字的字符串,切成 200 字的块。在当前的更新http://jsfiddle.net/gbb2ae4g/16/ 中,您会看到数组的最后一个实例获得了 200 个单词。 orthers 似乎在第一个之后立即削减。
  • 我忘记在找到第一个点后打破循环,所以它一直持续到一个块中只剩下一个句子。这是更正后的版本:jsfiddle.net/gbb2ae4g/17.
【解决方案2】:

如果我没听错的话,你想要的是从字符串中减少单词的数量

如果是,那么请阅读 MDN SPLIT METHOD 的拆分方法。

如您所见,split 方法有一个限制参数,因此接下来的代码将起作用:

var x = "bla bla bla bla bla";
var splits = x.split(" ",3);

那么splits 将是一个包含值bla,bla,bla 的数组

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-07-12
    • 1970-01-01
    • 2011-11-08
    • 1970-01-01
    • 1970-01-01
    • 2013-02-27
    • 2013-07-10
    相关资源
    最近更新 更多