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

Question

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

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

我在我的富人选手 div 上输入了这个： B

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

这是 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

对于你的情况，你可能想先将你的 innterhtml 保存到一个字符串中然后在转换后的字符串上使用 str.replace 方法。

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

if (!withinBoundaries && !withinBoundaries2 && !withinBoundaries3 && !withinBoundaries4) {
           var str = target.innerHTML;
           str = str.replace(/<.*>(.*)<\/.*>/g, "")
           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;
    }

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

substring isn't working as expected on innerHtml

javascript

substring

innerhtml