Javascript 在ol标签中多读少读

我使用jquery进行了“少读多读”切换，它将出现在文本的第100个符号之后

现在我有一个代码，在html中用第100个符号表示OL标记。它的工作原理和我想要的一样，但标记中的第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;
});

var showChar=100；
var ellipseText=“…”；
var moretext=“ёё”；
var lesstext=“Сцц”；
$（'.more'）。每个（函数（）{
var content=$（this.html（）；
如果（content.length>showChar）{
var c=content.substr（0，showChar）；
var h=content.substr（showChar，content.length-showChar）；
变量位置=h.indexOf（''）；
var h=[h.slice（0，位置），“”，h.slice（位置+5）]。连接（“”）；
var html=c+''+ellipseText+''
+h+”；
$（this）.html（html）；
}
});
$（“.morelink”）。单击（函数（）{
if（$（this）.hasClass（“更少”））{
$（此）.removeClass（“更少”）；
$（this.html（moretext）；
$（'.morecontent'）。每个（函数（）{
$（this.css（'display'，'none'）；
});
$（'.moreellipses'）.css（'display'，'inline'）；
}否则{
$（此）.addClass（“更少”）；
$（this.html（lesstext）；
$（'.morecontent'）。每个（函数（）{
$（this.css（'display'，'inline'）；
});
$（'.moreellipses'）.css（'display'，'none'）；
}
返回false；
});

我试图通过从文本中获取子字符串来确定html中文本中第100个符号的位置，但子字符串可能在html中出现得更快，甚至被标记破坏。

---

有没有办法修改我的代码，使“ellipseText”出现在文本的第100个符号之后？

您还应该使用

$（this）.text（）

跟踪剩余的“可用”字符，并在每次迭代中更新该值。 然后，要知道要在哪个位置插入标记，可以搜索要显示的子字符串的

索引

比如：

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;
    }
});

答：我在那里的标记看起来是这样的：
大文本 < LI>更多的文本
和…更多的按钮应该出现在
元素之后，而不是在它的中间。我不能使用text（），因为我需要更改标记、添加closing
标记等等。我理解，我需要在text（）中的第100个符号后插入…更多，但如何确定此符号在html（）中的位置？如果我理解正确，是否要在li元素后添加一个[…更多]，如果它包含100个以上的字符，并将内容剪切到该限制？您可以附上一个HTML标记示例来说明您正在使用的内容吗？在我做任何更改之前，它看起来是这样的：现在它看起来是这样的：，-并且工作正常，但是“…ёё”-打开按钮放置在错误的位置。它必须在文本中更进一步。明确地说，是用户决定标签中的内容。我只是将数据库中存储的内容呈现到页面上。更新以获得澄清。让我试着重新表述我想要的。上面的代码在HTML中的第100个符号后加上…更多。如您所见，我采用html（）.length，但它也计算标记数。例如，像这样的html“
文本
”的长度是13（如果我没有弄错的话）。但我想…在text（）中的第100个符号之后还有更多。我无法将代码中的html（）调用更改为text（）调用，因为正如您在上面的代码中所看到的，我需要更改元素的html标记，以设置跨度。