Substring text with javascript including html tags

Question

i wanted to substring a string something like follow. And i have start position and length of the string . i have checked this ques Substring text with HTML tags in Javascript. But in this substring is performing from 0 but i have a random start position. Any idea about how it will done

var str = 'Lorem ipsum <p>dolor <strong>sit</strong> amet</p>, consectetur adipiscing elit.'

jsfiddle.net/danmana/5mNNU check this fiddle in this all is done . But its working by assuming start position 0 . But in my case i have a random start position. — ap.singh
– ap.singh, Commented May 31, 2013 at 12:34

rahul maindargi · Accepted Answer · 2013-05-31 12:38:40Z

6

Here is DEMO

function html_substr( str, start ,count ) {

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

    walk( div, track );

    function track( el ) {
        if( count > 0 ) {
            var len = el.data.length;
            if(start<=len){
                el.data = el.substringData(start,len);
                start=0;
            } else{
                start-=len;
                el.data = '';
            }
            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);
            } else if( node.nodeType === 1 && node.childNodes && node.childNodes[0] ) {
                walk( node, fn );
            }
        } while( node = node.nextSibling );
    }
    return div.innerHTML;
}

Call it as

html_substr( str,13, 2 );

answered May 31, 2013 at 12:38

rahul maindargi

5,7052 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andy59469 Over a year ago

I have tested this quite thoroughly and it works every time. With nested tags and simple tags, as well as unclosed tags. To help understand the answer rahul has supplied here I will show the output of the three examples in the DEMO alongside the basic substr output 1) substr : p> ; html_substr : ol ---------- 2) substr : orem ipsum dolor ; html_substr : orem ipsum dolor sit ------------- 3) substr : rem ipsum dolor sit ; html_substr : rem ipsum dolor sit amet, cons

Benjamin Gruenbaum · Accepted Answer · 2015-02-12 19:20:50Z

0

Here is a native DOM API approach to do this sort of thing. The browser already has powerful built in HTML parsing abilities. No need to re-invent the wheel

var el = document.createElement("div");
el.innerHTML = 'Lorem ipsum <p>dolor <strong>sit</strong> amet</p>, consectetur adipiscing elit.';
el.getElementsByTagName("p").textContent;

Working demo

The result is just a non-html string which you can easily manipulate with .substring

So, how did this work?

We dumped our HTML into an HTML element.

Then we used the DOM API to say the following:

"Inside the HTML we just gave you, find all p tags, take the first (that's the [0]), and give us its textContent".

edited Feb 12, 2015 at 19:20

answered Jun 3, 2013 at 7:42

Benjamin Gruenbaum

278k90 gold badges524 silver badges524 bronze badges

Collectives™ on Stack Overflow

Substring text with javascript including html tags

2 Answers 2

1 Comment

Working demo

So, how did this work?

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

So, how did this work?

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related