截断文本，但在javascript中保留html

Question

我正在打印字符串<a href="..">some text</a>, <a href="..">some other text</a>。

我想截断可见文本，但保留链接。

如果我只是做了一个naïve子字符串，我会把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个字符处切断它，而不是在html输出中的第20个字符处。

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>