将文本限制为忽略HTML标记/属性的特定数量的字符

时间:2016-12-16 22:09:58

标签: javascript html

我有一个像这样的文本块:

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

但是我需要在计算字符时考虑文本中的链接和其他HTML,以便在100个可见字符后截断文本,而不是HTML本身的100个字符,并且< strong>在文本中保留HTML标记。

注意:我无法打开任何HTML标记,因此我需要在关闭开放标记之前截断文本,或截断文本然后添加正确的结束标签

有可能这样做吗?

3 个答案:

答案 0 :(得分:1)

使用正则表达式从字符串中删除所有html标记,然后使用子字符串

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

[更新]我读到了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

上的实例

答案 1 :(得分:0)

一种方法

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

答案 2 :(得分:0)

如果str是你的字符串,请使用它来获取所有文本。

&#13;
&#13;
<plugin>...</plugin>
&#13;
&#13;
&#13;