限制文本一定數目的字符忽略HTML標籤/屬性

Question

我有一個文本塊這樣的：

<p class="post">Lorem ipsum dolor sit amet, <a href="http://website.com/link" target="_blank" title="hello">consectetur adipiscing elit</a>. Pellentesque vehicula tortor eget tortor fermentum bibendum. Duis mollis nisl et metus vulputate, a aliquam quam pharetra. <a href="http://website.com/link" target="_blank" title="hello">consectetur adipiscing elit</a> quis hendrerit nibh ultrices eget. <span class="highlight">Praesent</span> eu mollis lectus, sed convallis quam.</p> 

我想經過100個字符截斷文本。只需一個文本字符串，我會使用類似：

var new_string = text_string.substring(0,100); 

但我需要計時的字符時，使其截斷後100個可見字符的文本，以文本中的鏈接和其他HTML考慮，不是100個字符的HTML本身，並且保留文本中的HTML標記。

注意：我不能保留任何HTML標記，因此我需要在截斷標記之前不截斷文本，或截斷文本，然後添加正確的結束標記。

可以做到這一點嗎？

Answer 1

地帶的所有的HTML從與正則表達式的字符串標籤和然後子串

var new_string = text_string.replace(/<[^>]*>/g, "").substring(0,100); 

[UPDATE]我讀到的保留的HTML代碼，唯一的解決辦法我認爲是這樣的：

var regx = new RegExp(/(<[^>]*>)/g); 
var counter = 0; 

//convert the string in array using the HTML tags as delimiter and keeping they as array elements 
strArray = str.split(regx); 

for (var i = 0, len = strArray.length; i < len; i++) { 
    //ignore the array elements that is HTML tags 
    if (!(regx.test(strArray[i]))) { 
     //if the counter is 100, remove this element with text 
     if (counter == 100) { 
      strArray.splice(i, 1); 
      continue; //ignore next commands and continue the for loop 
     } 
     //if the counter != 100, increase the counter with this element length 
     counter = counter + strArray[i].length; 
     //if is over 100, slice the text of this element to match the total of 100 chars and set the counter to 100 
     if (counter > 100) { 
      var diff = counter - 100; 
      strArray[i] = strArray[i].slice(0, -diff); 
      counter = 100; 
     } 
    } 
} 

//new string from the array 
new_string = strArray.join(''); 

//remove empty html tags from the array 
new_string = new_string.replace(/(<(?!\/)[^>]+>)+(<\/[^>]+>)/g, ""); 

現場示例Codepen

Answer 2

一個做

var html = 'YOUR HTML STRING' 
var elt = document.createElement('container'); 
elt.innerHTML = html; 
var text = elt.textContent; 
var result = text.substring(0,100); 

Answer 3

如果str爲您字符串中使用它來獲取所有的文字方式。

var str = '<p class="post">Lorem ipsum dolor sit amet, <a href="http://website.com/link" target="_blank" title="hello">consectetur adipiscing elit</a>. Pellentesque vehicula tortor eget tortor fermentum bibendum. Duis mollis nisl et metus vulputate, a aliquam quam pharetra. <a href="http://website.com/link" target="_blank" title="hello">consectetur adipiscing elit</a> quis hendrerit nibh ultrices eget. <span class="highlight">Praesent</span> eu mollis lectus, sed convallis quam.</p>' 
 
var allTheText = str.replace(/<[^>]*>/g,"") 
 
console.log(allTheText.length)