Question

我有一个文字，我希望使用JavaScript动态缩短“阅读更多”链接的文本。我使用以下JavaScript代码：

var limitDesc = -1;
function ResponsiveDesc() {
//var limitDesc = 100;
//var isHTML = RegExp.prototype.test.bind(/(<([^>]+)>)/i);
var chars = $("#ResponsiveDescription").html();
if (chars.length > limitDesc) {
    var visiblePart = $("<span> " + chars.substr(0, limitDesc - 1) + "   </span>");
    var dots = $("<span class='dots'>... </span>");
    var hiddenPart = $("<span class='more'>" + chars.substr(limitDesc - 1) + "</span>");
    var readMore = $("<span class='read-more'>More</span>");

    readMore.click(function () {
        $(this).prev().remove(); // remove dots
        $(this).next().show(); //show hiddenPart
        $(this).remove(); // remove readMore
    });

    $("#ResponsiveDescription").empty()
        .append(visiblePart)
        .append(dots)
        .append(readMore)
        .append(hiddenPart);
}
}
$(document).ready(function () {
if (limitDesc > 0 && $(window).width() < 500) {
    ResponsiveDesc();
}
});

主要的问题是我没有这个代码在一个单词或一个链接中间剪切我的文本。解决这个问题的最佳方法是什么？我可以在每个页面上手动更改“limitDesc”变量，但是当页面内容是动态的时候，这是不可能的。提前谢谢你。

Answer 1

您可以在长度限制之前的最后一个空格处拆分字符串。您可以使用lastIndexOf()确定它：

limitDesc = chars.lastIndexOf(" ", limitDesc);

http://www.w3schools.com/jsref/jsref_lastindexof.asp

使用javascript使用“Read More”链接动态缩短文本

1 个答案: