Javascript 仅显示#单词，隐藏其余单词，并使用选项切换更多单词

这里有一个jQuery问题

我从数据库中提取数据并将其显示在div中。我的问题是，出于可用性目的，我只想显示前10个单词，或50个字符。 我的例子是：

<div>
    this is text pulled from the database and being displayed in this div
</div>

这是从数据库中提取并显示在此div中的文本

我想要实现的是：

<div>
    this is text pulled from the ...
</div>

这是从。。。

---

在哪里。。。是一个切换，用于在用户单击文本时显示其余文本。这个想法是为了节省移动土地的空间。这有可能吗？提前感谢。

您可以将完整值存储在

数据-*

变量中，并连接单击事件，以便在单击时显示完整值

一个有效的例子是

当然，您可以选择从其他地方获取完整数据。我只是简单地使用了

data-*

选项来简化它。

函数truncate（$elem，wordNum）{
function truncate($elem, wordNum){
    var words = $elem.text().trim().split(/\s/).slice(0,wordNum);
    var replacement = $("<div/>").text(words.join(" ") + "...");
    replacement.click(function(){
        $(this).hide();
        $elem.show();

    });
    $elem.click(function(){
        replacement.show();
        $elem.hide();
    });

    $elem.before(replacement);
    $elem.hide();
}

truncate($("div"), 5);

var words=$elem.text（）.trim（）.split（/\s/）.slice（0，wordNum）；
变量替换=$（“”）.文本（words.join（“”+“…”）；
替换。单击（函数（）{
$（this.hide（）；
$elem.show（）；
});
$elem.单击（函数（）{
替换。show（）；
$elem.hide（）；
});
$elem.之前（替换）；
$elem.hide（）；
}
截断（$（“div”），5；

---

JS Fiddle:

Scartag为您提供了genius data-*理念。这是一个伟大的功能，我可能需要在未来使用自己

在选择前x个单词时，我将对字符串使用regexp和.exec（）函数，并使用exec在

中提供的数字输出子字符串

---

（？：\w+\s+{4}

将选择前4个单词。

伙计，这就是我要找的，我在网上搜索过类似的东西，但没有这样的运气。我必须承认，我从来没有想过要这样做。谢谢你的帮助。非常感谢。@AkiraDawson很高兴能帮上忙：）@AkiraDawson很高兴我能帮上忙！

$(function(){

    $("#divData").on("click", function(){

        var str = $("#divData").data("full-content");

        $("#divData").html(str);


    });

});

function truncate($elem, wordNum){
    var words = $elem.text().trim().split(/\s/).slice(0,wordNum);
    var replacement = $("<div/>").text(words.join(" ") + "...");
    replacement.click(function(){
        $(this).hide();
        $elem.show();

    });
    $elem.click(function(){
        replacement.show();
        $elem.hide();
    });

    $elem.before(replacement);
    $elem.hide();
}

truncate($("div"), 5);