截取HTML字符串而不破坏HTML标签

Question

如何编写一个函数，可以将带有HTML标记的字符串裁剪为指定长度而不破坏HTML标记。

返回的字符串不必精确地是N个字符长。它可以在N长字符串的边缘处截断标记之前或之后。

Visit <a href="www.htz.hr">Croatia</a> this summer.

CutIt(9)应该返回

Visit

或者

Visit <a href="www.htz.hr">Croatia</a>

- Ante

Answer 1

function trimHtml(html, options) {

    options = options || {};

    var limit = options.limit || 100,
        preserveTags = (typeof options.preserveTags !== 'undefined') ? options.preserveTags : true,
        wordBreak = (typeof options.wordBreak !== 'undefined') ? options.wordBreak : false,
        suffix = options.suffix || '...',
        moreLink = options.moreLink || '';

    var arr = html.replace(/</g, "\n<")
        .replace(/>/g, ">\n")
        .replace(/\n\n/g, "\n")
        .replace(/^\n/g, "")
        .replace(/\n$/g, "")
        .split("\n");

    var sum = 0,
        row, cut, add,
        tagMatch,
        tagName,
        tagStack = [],
        more = false;

    for (var i = 0; i < arr.length; i++) {

        row = arr[i];
        // count multiple spaces as one character
        rowCut = row.replace(/[ ]+/g, ' ');

        if (!row.length) {
            continue;
        }

        if (row[0] !== "<") {

            if (sum >= limit) {
                row = "";
            } else if ((sum + rowCut.length) >= limit) {

                cut = limit - sum;

                if (row[cut - 1] === ' ') {
                    while(cut){
                        cut -= 1;
                        if(row[cut - 1] !== ' '){
                            break;
                        }
                    }
                } else {

                    add = row.substring(cut).split('').indexOf(' ');

                    // break on halh of word
                    if(!wordBreak) {
                        if (add !== -1) {
                            cut += add;
                        } else {
                            cut = row.length;
                        }
                    }
                }

                row = row.substring(0, cut) + suffix;

                if (moreLink) {
                    row += '<a href="' + moreLink + '" style="display:inline">»</a>';
                }

                sum = limit;
                more = true;
            } else {
                sum += rowCut.length;
            }
        } else if (!preserveTags) {
            row = '';
        } else if (sum >= limit) {

            tagMatch = row.match(/[a-zA-Z]+/);
            tagName = tagMatch ? tagMatch[0] : '';

            if (tagName) {
                if (row.substring(0, 2) !== '</') {

                    tagStack.push(tagName);
                    row = '';
                } else {

                    while (tagStack[tagStack.length - 1] !== tagName && tagStack.length) {
                        tagStack.pop();
                    }

                    if (tagStack.length) {
                        row = '';
                    }

                    tagStack.pop();
                }
            } else {
                row = '';
            }
        }

        arr[i] = row;
    }

    return {
        html: arr.join("\n").replace(/\n/g, ""),
        more: more
    };
}

if (typeof module !== 'undefined' && module.exports) {
    module.exports = trimHtml;
}

使用方法

var html = '<div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p><p>Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. </p><p>Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p><p>Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</p></div>';
var trim = trimHtml(html, { limit: 200 });


// **returns object**


{
   html: '<div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p><p>Ut
   enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut...
   </p></div>',
   more: true // indicates if limit is reached
}

工作示例

- Muhammad Tahir

Answer 2

我解决了这个问题，以下是C#代码：

static string CutIt(string s, int limit)
{
    if (s.Length < limit) return s;

    int okIndex = 0;
    bool inClosingTag = false;
    int numOpenTags = 0;

    for (int i = 0; i < limit; i++)
    {
        if (s[i]=='<')
        {
            if (s[i+1]=='/')
            {
                inClosingTag = true;    
            }
            else
            {
                numOpenTags++;   
            }
        }
        if (s[i]=='>')
        {
            if (s[i-1]=='/')
            {
                numOpenTags--;
            }
            if (inClosingTag)
            {
                numOpenTags--;
            }
        }

        if (numOpenTags == 0) okIndex = i;

    }
    return s.Substring(0, okIndex + 1);
}

- Ante

---

当存在注释标签 <!-- ... --> 时，这可能会失败，因为它无法正确计算闭合标签。 - Emond

Answer 3

这可能有点过头了，但是尝试查找AWK，它可以很容易地完成这种文本处理工作，因为它的重点是处理文本。

你也可以编写自定义解析脚本，例如：

string s = "Visit <a href="www.htz.hr">Croatia</a> this summer."

result = ""

slice_limit = 9

i= 0

j = 0

in_tag = false

while i < slice_limit and j < s.size do

  if s[j] == "<" then in_tag = true

  if in_tag and s[i]==">" then in_tag = false

  if !in_tag then i++

  result += s[j]

end

...或者类似那样（没有测试，但可以给你一个想法）。

编辑：您还需要添加一些内容来检测标签是否已关闭（只需添加一个类似于 in_tag 的标志，并将其与一些正则表达式混合即可）希望这有所帮助。

编辑2：如果您提供要使用的语言，那可能会有所帮助。JavaScript？

- marcgg

Answer 4

static string CutIt(string s, int limit)
{
  s = s.Substring(0, limit);
  int openMark = s.LastIndexOf('<');
  if (openMark != -1)
  {
    int closeMark = s.LastIndexOf('>');
    if (openMark > closeMark)
    {
      s = s.Substring(0, openMark);
    }
  }
  return s.Trim();
}

public static void Main()
{
  Console.WriteLine(
    CutIt("Visit <a href=\"www.htz.hr\">Croatia</a> this summer.", 9)
  ); // prints "Visit"
}

- waqas

---

你必须注意，如果我们想在 </a> 标签上截取字符串，它会在 "</" 之前进行截取，并且其前面的 <a> 标签仍然保持打开状态。这是我们要避免的情况！ - Ante

Answer 5

在JavaScript中，您可以使用DOM元素的textContent属性来获取此内容。

HTML

<p id='mytext'>Hey <a href="#">Visit Croatia</a> today</p>

JavaScript

var el = document.getElementById("mytext");
console.log( el.textContent );
//alert( el.textContent ); // if you don't have firebug.

- garrow

Answer 6

这里是JavaScript的解决方案：trimHtml

- Brankodd

Answer 7

当我遇到这样的问题（针对RSS提要）时，我只是在截取字符串之前调用了strip_tags函数。

- Thinker