javascript - 在 ol 标签中多读少读

Question

我正在使用 jquery 进行多读少切换，这将出现在文本中的第 100 个符号之后。

现在我有代码可以在 OL 标签的 html 中使用第 100 个符号。它像我想要的那样工作，但标记中的第 100 个符号与文本中的符号不​​同，因为它也计算标签。

var showChar = 100;
var ellipsestext = "...";
var moretext = "Ещё";
var lesstext = "Скрыть";

$('.more').each(function () {
    var content = $(this).html();
    if (content.length > showChar) {
        var c = content.substr(0, showChar);
        var h = content.substr(showChar, content.length - showChar);
        var position = h.indexOf('</li>');
        var h = [h.slice(0, position), '</span></li><span class="morecontent">', h.slice(position + 5)].join('');
        var html = c + '<span class="moreellipses">' + ellipsestext + '</span><span class="morecontent"><span>'
            + h + '</span><a href="" class="morelink">' + moretext + '</a></span>';
        $(this).html(html);
    }
});

$(".morelink").click(function () {
    if ($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(moretext);
        $('.morecontent').each(function() {
            $(this).css('display', 'none');
        });
        $('.moreellipses').css('display', 'inline');
    } else {
        $(this).addClass("less");
        $(this).html(lesstext);
        $('.morecontent').each(function () {
            $(this).css('display', 'inline');
        });
        $('.moreellipses').css('display', 'none');
    }
    return false;
});

我试图通过从文本中获取子字符串来确定 html 文本中第 100 个符号的位置，但子字符串可能会在 html 中更快出现，甚至被标签破坏。有没有办法修改我的代码，以便“省略号”出现在文本中的第 100 个符号之后？

Answer 1

您还应该使用 $(this).text() 来跟踪剩余的“可用”字符，并且在每次迭代中，您应该更新该值。然后要知道您要在哪个位置插入标记，您可以搜索 indexOf 您将显示的子字符串

类似于:

const maxShowChar = 100;
let showChar = maxShowChar;
const ellipsestext = "...";
const moretext = "Ещё";
const lesstext = "Скрыть";


$('.more').each(function () {
    var textContent= $(this).text();
    var content = $(this).html();
    if (textContent.length > showChar) {
    [...]
    const textC = textContent.substr(0,showChar);
    const c = content.substr(0, content.indexOf(textC));
    [...]
    }else{
    showChar = showChar - textContent.length;
    }
});