javascript - 在ol标签中少读

我使用jquery使read more更少切换，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;
});

我试图通过从文本中获取子字符串来确定文本中第100个符号的位置，但子字符串可能在html中出现得更快，甚至被标记打断。
有没有办法修改我的代码，使“ellipsestext”出现在文本中的第100个符号之后？

最佳答案

您还应该使用$(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;
    }
});

关于javascript - 在ol标签中少读，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54143604/