【问题标题】:Javascript word count cut offJavascript字数被切断
【发布时间】:2011-06-25 03:53:14
【问题描述】:

我有一个 ID 为“shortblogpost”的 div。我想数到第 27 个单词,然后停止并在末尾添加“...”。

我正在尝试以下代码。问题,它计算字母而不是单词。我认为它使用 jQuery 而不是限制 JavaScript?

我仅出于各种服务器原因需要使用 JavaScript

<script type="text/javascript">
var limit        = 100,
    text         = $('div.shortblogpost').text().split(/\s+/),
    word,
    letter_count = 0,
    trunc        = '',
    i            = 0;

while (i < text.length && letter_count < limit) {
  word         = text[i++];
  trunc       += word+' ';
  letter_count = trunc.length-1;

}

trunc = $.trim(trunc)+'...';
console.log(trunc);
</script>

提前向大家寻求帮助。

【问题讨论】:

    标签: javascript blogs word-count


    【解决方案1】:

    截断函数。

    使用:truncate('这是对这个函数的测试', 2); 返回:这是……

    使用:truncate('This is a test of this function', 5, '+++'); 返回:这是对+++的测试

    function truncate (text, limit, append) {
        if (typeof text !== 'string')
            return '';
        if (typeof append == 'undefined')
            append = '...';
        var parts = text.split(' ');
        if (parts.length > limit) {
            // loop backward through the string
            for (var i = parts.length - 1; i > -1; --i) {
                // if i is over limit, drop this word from the array
                if (i+1 > limit) {
                    parts.length = i;
                }
            }
            // add the truncate append text
            parts.push(append);
        }
        // join the array back into a string
        return parts.join(' ');
    }
    

    编辑: 通过 OP 的参数实现又快又脏:

    <script type="text/javascript">
    // put truncate function here...
    
    var ele = document.getElementById('shortblogpost');
    ele.innerHTML = truncate(ele.innerHTML, 20);
    </script>
    

    【讨论】:

    • 好吧...我试图回答您的答案,但运气不佳...可以说我对 JS 一无所知(半真半假:))
    • 好的,添加了一个快速而肮脏的实现。尽管我还要补充一点,您应该尝试更好地了解 javascript 和 HTML 是如何协同工作的 - 无方向的四处寻找是灾难的根源。
    • 恭喜!您的代码有效! :)
    • 问题是你在一个你应该使用 $('div#shortblogpost') 的 id 上使用 $('div#shortblogpost');
    • 嘿,谢谢......但公平地说,这里的其他一些答案也是如此。这不仅仅是简单地编写有效的代码,而是以一种没有经验的人可以有效地使用它的方式这样做! :)
    【解决方案2】:

    这可以在一行代码中完成:

    myString.replace(/(([^\s]+\s+){27}).+/, "$1...");
    

    或者,你可以把它变成一个函数:

    function truncateString(s, wordCount)
    {
        var expr = new RegExp("(([^\\s]+\\s+){" + wordCount + "}).+");
        return s.replace(expr, "$1...");
    }
    

    因此,要使这适用于您的代码,您可以这样做:

    var post = $('div.shortblogpost').text();  // get the text
    post = postText.replace(/(([^\s]+\s+){27}).+/, "$1...");  // truncate the text
    $('div.shortblogpost').text(post);  // update the post with the truncated text
    

    【讨论】:

    • 我一定是做错了什么 但感谢您的简短回答
    • 我喜欢你的短臂。没有太多的犹豫和测试,我无法制作出准确的正则表达式。
    • @webmaster alex - 我已经更新了我的答案以提供更具体的代码。希望对您有所帮助。
    • 我发表了这个评论,如果它影响你的代码,请告诉我............ [文本在下面
      " + data.entries[i].excerpt + "
      在页面的下方,我添加了您的 JS,然后获取结果并将其剃掉。我认为它会将结果弹出回正确的 div]
    【解决方案3】:

    循环是逐字追加,while(有单词&&字母数低于限制)。您唯一需要做的就是将第二个条件替换为“&& 字数低于限制”。

    将此伪代码转换为 JS 应该很简单...

    【讨论】:

    • 嗯,你的答案似乎很简单......但我得到了我开始使用的代码。虽然我努力自己学习更多 JS,但我还没有到可以自己实现您的答案的地步。
    • @webmaster alex l: 嗯,i 似乎保存了你目前在trunc 中的字数……还有一个limit……你正在尝试找出一个是否比另一个大...
    【解决方案4】:

    这个怎么样? jsfiddle

    html:

    <div id='shortblogpost'>test test test test test test test test test test test</div>
    

    javascript:

    alert(document.getElementById('shortblogpost').innerHTML);
    var numWordToDisplay = 3; //how many words u want to display in your case 27
    var newArray = document.getElementById('shortblogpost').innerHTML.split(' ');
    if(newArray.length >= numWordToDisplay )
        newArray.length = numWordToDisplay;
    console.log(newArray.join(' ') + '...'); //test test test...
    

    【讨论】:

    • 大声笑,我喜欢编辑,我现在正在测试你的答案,你之前的帖子没有用:/...尝试新的编辑
    • 是 div#shortblogpost 中的文本吗?
    • 你能帮我个忙吗,它还没有工作,但你能在 getElementByID 中添加一个警报弹出,看看它是否找到了我的短博。我确定问题出在我身上,而不是你的代码,但我想检查一下。
    • 文本在下面的
      " + data.entries[i].excerpt + "
      在页面下方我添加了你的 JS 然后取结果并将其剃光。我认为它会将结果弹出回正确的 div
    • 其实最好的是@gilly3 但是用户体验> imo 最佳答案!
    【解决方案5】:

    这应该可行:

    var words = $('div.shortblogpost').text().replace( /\s/g, ' ' ).split( ' ' );
    var result = "";
    for( var w = 0 ; w < 27 ; w++ ) {
        if( words[w].length > 0 ) {
            result += words[w] + ' ';
        }
    }
    result = result.trim() + "...";
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2016-01-02
      • 1970-01-01
      • 1970-01-01
      • 2014-09-13
      • 1970-01-01
      • 2017-08-07
      • 1970-01-01
      相关资源
      最近更新 更多