Sous-chaîne de texte avec des balises HTML dans Javascript

Avez-vous une solution à la sous-chaîne de texte avec des balises HTML en Javascript?

Par exemple:

var str = 'Lorem ipsum <a href="#">dolor <strong>sit</strong> amet</a>, consectetur adipiscing elit.'

html_substr(str, 20)
//return Lorem ipsum <a href="#">dolor <strong>si</strong></a>

html_substr(str, 30)
//return Lorem ipsum <a href="#">dolor <strong>sit</strong> amet</a>, co

source d'informationauteur honzahommer

  1. 7

    Tenant compte du fait que analyse html avec la regex est une mauvaise idéevoici une solution qui ne fait que cela 🙂

    EDIT: Juste pour être clair: Ce n'est pas une solution valide, il a été conçu comme un exercice qui fait très clémente hypothèses sur la chaîne d'entrée, et en tant que tel, doit être pris avec un grain de sel. Lire le lien ci-dessus et de voir pourquoi l'analyse html avec la regex ne peut jamais être fait.

    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;

}

    Exemple: http://jsfiddle.net/danmana/5mNNU/

    Remarque: patrick dw est la solution peut-être plus sûr quant à la mauvaise html, mais je ne suis pas sûr de la façon dont il gère les espaces blancs.

  2. 5

    Utilisation:

    var str = 'Lorem ipsum <a href="#">dolor <strong>sit</strong> amet</a>, consectetur adipiscing elit.';

var res1 = html_substr( str, 20 );
var res2 = html_substr( str, 30 );

alert( res1 ); //Lorem ipsum <a href="#">dolor <strong>si</strong></a>
alert( res2 ); //Lorem ipsum <a href="#">dolor <strong>sit</strong> amet</a>, co

    Exemple: http://jsfiddle.net/2ULbK/4/

    Fonction:

    function html_substr( str, count ) {

    var div = document.createElement('div');
    div.innerHTML = str;

    walk( div, track );

    function track( el ) {
        if( count > 0 ) {
            var len = el.data.length;
            count -= len;
            if( count <= 0 ) {
                el.data = el.substringData( 0, el.data.length + count );
            }
        } else {
            el.data = '';
        }
    }

    function walk( el, fn ) {
        var node = el.firstChild;
        do {
            if( node.nodeType === 3 ) {
                fn(node);
                    //         Added this >>------------------------------------<<
            } else if( node.nodeType === 1 && node.childNodes && node.childNodes[0] ) {
                walk( node, fn );
            }
        } while( node = node.nextSibling );
    }
    return div.innerHTML;
}
  3. 5

    c'est la solution pour chacun des tags

    function subStrWithoutBreakingTags(str, start, length) {
    var countTags = 0;
    var returnString = "";
    var writeLetters = 0;
    while (!((writeLetters >= length) && (countTags == 0))) {
        var letter = str.charAt(start + writeLetters);
        if (letter == "<") {
            countTags++;
        }
        if (letter == ">") {
            countTags--;
        }
        returnString += letter;
        writeLetters++;
    }
    return returnString;
}
  4. -1

    Javascript a une sous-chaîne de la méthode. Il ne fait aucune différence si la chaîne contient des html.

    voir http://www.w3schools.com/jsref/jsref_substr.asp

  5. -1

    Utiliser quelque chose de similaire à = str.replace(/<[^>]*>?/gi, '').substr(0, 20);

    J'ai créé un exemple: http://fiddle.jshell.net/xpW9j/1/