CODEWITHSUNDEEP
javascriptsubstring
user4353985
user4353985

Reputation:

Javascript substring with html tags

I have searched too much on same topic but not is perfect for what I am looking for.

I have a string like :

var string ='<strong><span>Hii </span> <p>this is just a demo <span>string<span></p></strong>'

Now what I want is to substring it with limit with javascript substring function but don't want tags to be cut in middle like for example

<strong><span>Hii </span> <p

It should be like

<strong><span>Hii </span> <p>

I am using

string.substr(0,200)

string is dynamic variable with html tags

Upvotes: 6

Views: 5928

Answers (6)

Lu Blue
Lu Blue

Reputation: 355

I think my function is more accurate when it comes to being more sensitive on the content syntax. If your substring length cuts a word in half for example, the word will be included fully.

function HTML_substring(string, length) {

    var noHTML = string.replace(/<[^>]*>?/gm, ' ').replace(/\s+/g, ' ');
    var subStringNoHTML = noHTML.substr(0, noHTML.indexOf(" ", length));
    var words = subStringNoHTML.split(" ");

    var outPutString = "";
    var wordIndexes = [];

    words.forEach((word, key) => {

        if (key == 0) {

            outPutString += string.substr(0, string.indexOf(word) + word.length);
            wordIndexes[key] = string.indexOf(word) + word.length;

        } else {

            let i = wordIndexes[key - 1];

            outPutString += string.substring(i, string.indexOf(word, i) + word.length);
            wordIndexes[key] = string.indexOf(word, i) + word.length;

        }
    });

    return outPutString;

}

Upvotes: 1

user4227915
user4227915

Reputation:

Well, I did a function:

function my_substring (str) {
    var answer = [], x;
    for (var i=0, l=str.length; i<l; i++) {
        x = i;
        if (str[i] == '<') {
            while (str[++i] != '>');
            answer.push( str.substring(x, i+1) );
        }
        else {
            while (++i < l && str[i] != '<');
            answer.push( str.substring(x, i) );
            i--;
        }
    }
    return answer;
}

var string = 
"<strong><span>Hii </span> <p>this is just a demo <span>string<span></p></strong>"

console.log ( my_substring(string) );

This code will output: 

["<strong>", 
 "<span>", 
 "Hii ", 
 "</span>", 
 " ", 
 "<p>", 
 "this is just a demo ", 
 "<span>", 
 "string", 
 "<span>", 
 "</p>", 
 "</strong>"
]

Then you can select what you want in the array. Hope it helps.

Upvotes: 0

Kerstomaat
Kerstomaat

Reputation: 713

My solution:

function smart_substr(str, len) {
    var temp = str.substr(0, len);
    if(temp.lastIndexOf('<') > temp.lastIndexOf('>')) {
        temp = str.substr(0, 1 + str.indexOf('>', temp.lastIndexOf('<')));
    }
    return temp;
}

http://jsfiddle.net/8t6fs67n/

Upvotes: 5

link_alex
link_alex

Reputation: 11

If I understood you correctly, you want to to do something like this?

var limit = 28;
var test = '';
var string = '<strong><span>Hii </span> <p>this is just a demo <span>string<span></p></strong>';

    do {
          test = string.substring(0,limit); 
          limit++;
    } while(test.charAt(test.length-1) !== '>');


test will be equal to '<strong><span>Hii </span> <p>'

or will ends with any another closing tag which is above your limit

Upvotes: 0

Dawid Rusnak
Dawid Rusnak

Reputation: 642

I don't see reason to do so, but theoretically something like this:

function substrWithTags(str, len) {
    var result = str.substr(0, len),
        lastOpening = result.lastIndexOf('<'),
        lastClosing = result.lastIndexOf('>');

    if (lastOpening !== -1 && (lastClosing === -1 || lastClosing < lastOpening)) {
        result += str.substring(len, str.indexOf('>', len) + 1);
    }

    return result;
}

var s = '<strong><span>Hii </span> <p>this is just a demo <span>string<span></p></strong>'

// <strong><span>Hii </span> <p>this is just a demo <spa
s.substr(0, 53);

// <strong><span>Hii </span> <p>this is just a demo <span>
substrWithTags(s, 53);

Upvotes: 1

Morvael
Morvael

Reputation: 3567

Its not elegant but it works, will increase the characters to include the next closing tag https://jsfiddle.net/q680vors/

Just change length to the required number of characters.

var string ='<strong><span>Hii </span> <p>this is just a demo <span>string<span></p></strong>';

var length = 2;
var openTag = 0, closeTag = 0,i=0;
for(i; i<length; i++)
{
    if(string[i] == "<")
        openTag++;
    if(string[i] == ">")
        closeTag++;
}
if(openTag > closeTag)
{
    while(string[i] != ">")
        i++;
}

var newString = string.substring(0,(i+1));

alert(newString);

Upvotes: 1

Related Questions