截断文本但在javascript中保留html

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处切掉它，而不是在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做到这一点。

＆＃13;

＆＃13;

  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;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;