截断 javascript 中的文本，不包括 html 元素

Question

我正在使用以下函数来截断旁边有一个 "read more" 按钮的文本。

truncateText: function (string, targetCharacterLength) {
    var length = string.length;
    if (length < targetCharacterLength) {
        return (string)
    } else {
        var shortenedString = string.slice(0, targetCharacterLength);
        shortenedString = shortenedString.slice(0,shortenedString.lastIndexOf(' ')) + '... ';
        return shortenedString
    }
}

所以我遇到的问题是文本中的 < a > 标签。如果它在 "read more" 按钮之前开始，按钮的功能就会中断。

这是我在检查 < a > 标签刚好在 "..."

之前开始的文本元素时看到的

< a... < a="" href="#" class="more" > Read More < /a...>

有人知道我该如何解决这个问题吗？我无法使用插件。

谢谢

Answer 1

您必须在输入字符串中找到锚块 </a> 的最后一个索引。您可以使用 .lastIndexOf() JavaScript Api.

试试 FIDDLE，这里我给出了一个带有锚标记的文本。代码找到标记正文的结尾 </a> .

这是一个粗略的例子，所以我认为使用 /a> 以外的字符串需要进行审查。

我已将功能更新如下

function truncateText(string, targetCharacterLength) {
    var length = string.length;
    if (length < targetCharacterLength) {
      return (string)
    } else {
      var shortenedString = string.slice(0, targetCharacterLength);
      var tempshortenedString = shortenedString.slice(0, shortenedString.lastIndexOf(' '));

      var lastMarkupBegin = -1;
      var lastMarkupEnds = -1;
      try { 
        lastMarkupBegin = tempshortenedString.lastIndexOf("<a");
        lastMarkupEnds = tempshortenedString.lastIndexOf("/a>");
      } catch (err) {}
      //alert(lastMarkupEnds);
      if (lastMarkupBegin != -1) { // has an opening anchor tag
        if (lastMarkupEnds == -1) { // not having an closing tag
          tempshortenedString = tempshortenedString.slice(0, lastMarkupBegin);
          //alert(tempshortenedString);
          return tempshortenedString + '... ';
        }
      }
      return shortenedString + '... '
    }

希望对你有用

截断 javascript 中的文本，不包括 html 元素

truncating text in javascript excluding html elements

html

javascript

jquery

truncate