substring isn't working as expected on innerHtml

Question

The string i'm working on is "innerHtml", i want to extract from it a substring starting from the index 0 until index limit.

In Javascript , the method : string.substring(startIndex, endIndex) allows to extract a substring starting with the start index and finishing with endIndex.

i Typed on my rich conteant div this: <b>B</b>

after applying substring on the innerHtml i get this: <b></b>

this is the 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)
    })

what is wrong ?

Answer 1

as @Khant said innerHTML is html, so what was missing is encode from html to string and decode from string to 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;
    }