Question

我有这一段。我想将此段落分成更多n段，而不会破坏通过span标记给文本的内联样式。

<span style="font-weight: bold; font-style: italic; text-decoration: underline;">然后他们介绍了仙女的公主，她的名字叫帕蒂。她的父亲是仙女之王，称她为帕蒂维尼。她非常漂亮，她的金色短发，金色的皇冠和适合公主的衣服。公主说她有个好消息，其中一个仙女会有一个小仙女。大家都向她表示祝贺。然后她继续说，几个星期前我们发现了，但我们不想让它恶作剧。每个人都再次祝贺她，然后上床睡觉。第二天早上她生了孩子。她决定给她的朱莉娅起名。当她转过身来，能够走路时，杰西和玛丽苏仍然在那里。就在周六，Jesse和Mary Sue即将离开，然后他们听到一个熟悉的声音，决定再住一晚。然后他们介绍了仙女的公主，她的名字叫Patty。她的父亲是仙女之王，称她为帕蒂维尼。她非常漂亮，她的金色短发，金色的皇冠和适合公主的衣服。公主说她有个好消息，其中一个仙女会有一个小仙女。大家都向她表示祝贺。然后她继续说，几个星期前我们发现了，但我们不想让它恶作剧。星期六，Jesse和Mary Sue即将离开，然后他们听到一个熟悉的声音，并决定再住一晚。然后他们介绍了仙女的公主，她的名字叫帕蒂，每周<span style="font-weight: bold; font-style: italic;">e congratulated her again and went to bed. The next morning she had the baby. She decided to name her Julia. When she turned one and was able to walk Jesse and Mary Sue were still there. It was S</span>。她的父亲是仙女之王，称她为帕蒂维尼。她非常漂亮，她的金色短发，金色的皇冠和适合公主的衣服。公主说她有个好消息，其中一个仙女会有一个小仙女。大家都向她表示祝贺。然后她继续说，几个星期前我们发现了，但我们不想让它恶作剧。每个人都再次祝贺她，然后上床睡觉。第二天早上她生了孩子。她决定给她的朱莉娅起名。当她转过身来，能够走路时，杰西和玛丽苏仍然在那里。就在周六，Jesse和Mary Sue即将离开，然后他们听到一个熟悉的声音，决定再住一晚。然后他们介绍了仙女的公主，她的名字叫Patty。她的父亲是仙女之王，称她为帕蒂维尼。她非常漂亮，她的金色短发，金色的皇冠和适合公主的衣服。公主说她有个好消息，其中一个仙女会有一个小仙女。大家都向她表示祝贺。然后她继续说，几个星期前我们发现了，但我们不想让它恶作剧。每个人都再次祝贺她，然后上床睡觉。第二天早上她生了孩子。她决定给她的朱莉娅起名。当她转过身来，能够走路时，杰西和玛丽苏仍然在那里。就在周六，Jesse和Mary Sue即将离开，然后他们听到一个熟悉的声音，决定再住一晚。然后他们介绍了

这是我一直试图使用的功能，但它没有像我预期的那样工作。它打破了内联样式

      function htmlSubstring(s, n) {
          var m, r = /<([^>\s]*)[^>]*>/g,
              stack = [],
              lasti = 0,
              result = '';

          //for each tag, while we don't have enough characters
          while ((m = r.exec(s)) && n) {
              //get the text substring between the last tag and this one
              var temp = s.substring(lasti, m.index).substr(0, n);
              //append to the result and count the number of characters added
              result += temp;
              n -= temp.length;
              lasti = r.lastIndex;

              if (n) {
                  result += m[0];
                  if (m[1].indexOf('/') === 0) {
                      //if this is a closing tag, than pop the stack (does not account for bad html)
                      stack.pop();
                  } else if (m[1].lastIndexOf('/') !== m[1].length - 1) {
                      //if this is not a self closing tag than push it in the stack
                      stack.push(m[1]);
                  }
              }
          }

          //add the remainder of the string, if needed (there are no more tags in here)
          result += s.substr(lasti, n);

          //fix the unclosed tags
          while (stack.length) {
              result += '</' + stack.pop() + '>';
          }

          return result;
      }

请帮助我。

Answer 1

我真的不知道你想要达到什么目的。

但that script允许您将文本拆分为n段（您的＆lt; span /＆gt; s仍然有用）：

var cntParagraphs = 3,
    $el = document.getElementsByTagName('div')[0],
    text = $el.innerHTML,
    textLength = text.length,
    brkPnt = Math.round(textLength / cntParagraphs),
    brkPntMatch,
    brkPntMatch2,
    regExp,
    regExp2,
    i;

for(i=1; i<cntParagraphs; i++) {
    regExp = new RegExp('^(.{' + i * brkPnt +'}[^\.]*\\.)(.*)$');
    brkPntMatch = text.match(regExp);
    if(brkPntMatch) {
        regExp2 = new RegExp('(<[^\/].{1,80}>)[^<\/]*$');
        brkPntMatch2 = brkPntMatch[1].match(regExp2);
        if(brkPntMatch2) {
            text = brkPntMatch[1] + '</p><p>' + brkPntMatch2[1] + brkPntMatch[2];
        }
        else {
            text = brkPntMatch[1] + '</p><p>' + brkPntMatch[2];
        }
    }
}

text = '<p>' + text + '</p>';
$el.innerHTML = text;

substr没有破坏内联样式

1 个答案: