子字符串在innerHtml上没有按预期工作

Question

我正在处理的字符串是“innerHtml”，我想从中提取一个从索引0开始到索引limit的子字符串。

在 Javascript 中，方法： string.substring(startIndex, endIndex)允许提取以开始索引开始并以结束索引结束的子字符串。

我在我的丰富内容 div 上输入：<b>B</b>

在innerHtml上应用子字符串后，我得到了这个：<b></b>

这是js：

    const target = document.querySelector('#RichText')
    

    document.addEventListener('click', (event) => {
        const withinBoundaries = event.composedPath().includes(target)
       
        if (!withinBoundaries && !withinBoundaries2 && !withinBoundaries3 && !withinBoundaries4)     {
            target.innerHTML = target.innerHTML.substring(0, 3);
        }
        alert(target.innerHTML.length + target.innerHTML)
    })

怎么了 ？

Answer 1

对于您的情况，您可能希望先将 interhtml 保存为字符串，然后在转换后的字符串上使用str.replace方法。

然后你会想要对结果进行子串，祝你好运

if (!withinBoundaries && !withinBoundaries2 && !withinBoundaries3 && !withinBoundaries4) {
           var str = target.innerHTML;
           str = str.replace(/<.*>(.*)<\/.*>/g, "$1")
           var res = str.substring(0, 3);
    }

alert(res)

Answer 2

正如@Khant 所说的innerHTML 是html，所以缺少的是从html 编码到字符串和从字符串解码到html：

document.addEventListener('click', (event) => {
        const withinBoundaries = event.composedPath().includes(target)
        const withinBoundaries2 = event.composedPath().includes(target2)
        const withinBoundaries3 = event.composedPath().includes(target3)
        const withinBoundaries4 = event.composedPath().includes(target4)
        
        if (!withinBoundaries && !withinBoundaries2 && !withinBoundaries3 && !withinBoundaries4) {

            var str = htmlencode(target.innerHTML);
            var innerHTML = $.parseHTML(htmldecode(str.substring(0, limit)));
            $('#RichText').html(innerHTML);
            
        }
    })
    

       
    function htmlencode(str) {

        var div = document.createElement('div');
        div.appendChild(document.createTextNode(str));
        return div.innerHTML;
    }
    function htmldecode(str) {

        var txt = document.createElement('textarea');
        txt.innerHTML = str;
        return txt.value;
    }