Angular js ellipsis

有什麼方法可以使用角度js來對字符串進行子串處理，並在末尾添加省略號，而忽略錨標記（如果它在子字符串內）？Angular js ellipsis

例如，我的文字是：

Lorem存有一直是行業的標準虛擬文本自1500年代曾經當一個未知的打印機採取了廚房類型和炒它使一個模式標本書。

我只能在該省略號後面顯示最多70個字符的文本。

在這種情況下，從「55-100近似」是錨鏈接，子串將從0,70開始的字符串打碎並創建具有損壞的錨鏈接的壞串。

在HTML中，我使用：

> data-ng-bind-html

解析字符串。

我們怎樣才能忽略< a href="something.html" > </a>標籤裏面的字符串和子字符串的其他內容？

不想使用CSS，因爲內容可以是任意長度。使用

篩選：

filter('customEllipsis', function() { 
     return function(input, number) { 
      if (input) { 
       return input.length > number ? input.substring(0, number) + '...' : input; 
      } 
     }; 
    });

來源

2017-02-17 Kunal Vashist

@mvermand已經刪除我的評論，因爲問題狀態OP不希望CSS。儘管CSS方法不會受到破壞的錨的影響。 –

@KUE我認爲你需要一個reg-ex來找到一個未終止的錨點 – mvermand

是的，有些東西可以在不破壞錨點鏈接的情況下進行子串處理。 –

您可以使用角的內置過濾器limitTo

來源

2017-02-17 08:07:53 diEcho

雖然這對HTML內容有效嗎？ –

使用Angular sanitizer解析HTML。有關使用示例，請參閱此jsbin。

app.filter('customEllipsis', function($sce) { 
    return function(input, number) { 
    if (input) { 
     input = input.length > number ? input.substring(0, number) + '...' : input; 
     input = $sce.trustAsHtml(input); 
     return input; 
    } 
    }; 
});

來源

2017-02-17 08:34:10

這裏是一個解決方案：

HTML內容到一個DOM文檔
轉換執行文檔
評估所有文本節點的深度優先遍歷，後切斷的最大長度已經達到了，並增加了省略號
丟棄剩餘節點
序列化的結果回HTML

下面的代碼片段包含完整的實現。它以示例字符串
Click <a href="http://stackoverflow.com">this absolutely <b>ah-mah-zing</b> link</a> to access Stackoverflow.
分別限制爲20,25,30,35,40,45和50個字符爲例。

運行代碼片段查看結果。

function limit(string, maxLength) { 
 
    let visit = function(node) { 
 
    if (count < maxLength) { 
 
     if (node.nodeType === Node.TEXT_NODE) { 
 
     let left = maxLength - count; 
 
     let length = node.nodeValue.length; 
 

 
     if (length > left) { 
 
      node.nodeValue = node.nodeValue.substring(0, left) + '...'; 
 
      count += left; 
 
     } else { 
 
      count += length; 
 
     } 
 
     } else { 
 
     for (let childNode of Array.from(node.childNodes)) { 
 
      visit(childNode); 
 
     } 
 
     } 
 
    } else { 
 
     node.remove(); 
 
    } 
 

 
    return node; 
 
    }; 
 
    let dom = new DOMParser().parseFromString(string, "text/html"); 
 
    let tree = dom.body; 
 
    let count = 0; 
 

 
    return visit(tree).innerHTML; 
 
} 
 

 
let string = 'Click <a href="http://stackoverflow.com">this absolutely <b>ah-mah-zing</b> link</a> to access Stackoverflow.'; 
 

 
document.getElementById('container').innerHTML = [20, 25, 30, 35, 40, 45, 50] 
 
     .map(maxLength => limit(string, maxLength)) 
 
     .join('<br>');

<div id="container"></div>

優勢

它保留了所有相關的標籤，甚至嵌套的標籤
這是精確的，因爲HTML標記和屬性都沒有考慮到，以確定如何許多字符顯示。

缺點

性能可能不是恆星，但仍然有優化的餘地（例如序列化回HTML可以跳過，在DOMParser實例可以共享等）

來源

2017-02-17 10:55:41

Angular js ellipsis

回答

相關問題