Усекать текст, но сохранить html в javascript

Question

Я печатаю строку <a href="..">some text</a>, <a href="..">some other text</a>.

Я хочу обрезать видимый текст, но сохраняя ссылку.

Если бы я просто сделал наивную подстроку, я бы испортил html.

Я хочу убедиться, что показано только 100 символов, но если последняя часть строки - это, например, <a hre, то ее также следует удалить.

Редактировать

Я попытался

arr = ['some text', 'some other text', 'some third text']; 
output = arr.map(el => '<a href="#">' + el + '</a>').join(', '); 

// print 
console.log(output.substr(0, 20)) 

но это отрежет HTML и вывод

<a href="#">some tex 

Но я хочу, чтобы подсчитать количество показываемых символов вместо того, сколько для отображения результата использовались символы.

Так что если показанный результат равен some text, some other text, some third text, я хочу, чтобы он отключил его на символе 20 в выходном тексте, а не на символе 20 на выходе html.

Answer 1

Набор textContent элементов ни к чему вы хотите:

(function() { 
 
    var links = document.getElementsByClassName("link"); 
 
    for(var i = 0; i < links.length; i++) { 
 
    links[i].textContent = "Link text changed"; 
 
    } 
 
})();

<a class="link" href="http://stackexchange.com">Stack Exchange</a> 
 
<a class="link" href="http://stackoverflow.com">Stack Overflow</a>

Answer 2

Вы можете сделать это с помощью простого CSS.

var paragraph = document.querySelector('p#before'); 
 

 
    document.querySelector('p#after-text').innerHTML = truncateTEXT(paragraph, 20, true); 
 
    document.querySelector('p#after-html').innerHTML = truncateHTML(paragraph, 20, true); 
 

 
    function truncateHTML(html, limit, dots) { 
 
    holdCounter = false; 
 
    truncatedHTML = ''; 
 
    html = paragraph.innerHTML; 
 

 
    for(index = 0; index < html.length; index++) { 
 
     if(!limit) { 
 
     break; 
 
     } 
 
     if(html[index] == '<') { 
 
     holdCounter = true; 
 
     } 
 
     if(!holdCounter) { 
 
     limit--; 
 
     } 
 
     if(html[index] == '>') { 
 
     holdCounter = false; 
 
     } 
 
     truncatedHTML += html[index]; 
 
    } 
 
    truncatedHTML = correctHTML(truncatedHTML); 
 
    if(dots) { 
 
     truncatedHTML = truncatedHTML + '...'; 
 
    } 
 
    return truncatedHTML; 
 
    } 
 

 

 
    function truncateTEXT(string, limit, dots) { 
 
    string = string.innerText; 
 
    if(string.length > limit) { 
 
     return string.substring(0, limit) + (dots ? '...' : ''); 
 
    } else { 
 
     return string; 
 
    } 
 
    } 
 

 
    function correctHTML(html){ 
 
    container = document.createElement('div'); 
 
    container.innerHTML = html 
 

 
    return container.innerHTML; 
 
    }

<p id="before"><a href="#">Lorem</a> <strong>ipsum</strong> <a href="#">dolor</a> <strong>sit</strong> <a href="#">amet</a> <strong>consectetur</strong> <a href="#">adipiscing</a> <strong>elit</strong></p> 
 
<p id="after-text"></p> 
 
<p id="after-html"></p>