CODEWITHSUNDEEP
javascript
windowsgm
windowsgm

Reputation: 1616

Catching Line Breaks in Text

So I'm analysing a bunch of HTML in javascript so that I can trim this article down to 30 characters-ish and append something like '...READ MORE' etc. Problem is that the block of text is spaced out with BR tags. Here's my code;

<head runat="server">
<title></title>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    window.onload = function onLoad() {
        alert("Start");
        var intros = this.document.getElementById('EventContent');
        if (intros) {
            for (i = 0; i < intros.length; i++) {

                var els = intros[i].childNodes;
                if (els) {
                    for (j = 0; j < els.length; j++) {
                        alert(els[j].tagName)
                    }
                }
            }
        }
        alert("Start");
    }

</script>
</head>
<body>
<form id="form1" runat="server">
<div id="EventContent">
<br />


<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br />
</div>
</form>
</body>

But my alert Tagname never displays although I do get alerted START and END. What am I doing wrong? How can I catch those stupid lineBreaks...

Upvotes: 1

Views: 116

Answers (2)

Matthew Smith
Matthew Smith

Reputation: 1287

Your variable 'intros' is not an array, so intros.length is undefined. You just need to iterate over intros.childNodes

<head runat="server">
<title></title>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    window.onload = function onLoad() {
        alert("Start");
        var intros = this.document.getElementById('EventContent');
        if (intros) {
            for (i = 0; i < intros.childNodes.length; i++) {
                alert(intros.childNodes[i].tagName)
            }
        }
        alert("Start");
    }

</script>
</head>
<body>
<form id="form1" runat="server">
<div id="EventContent">
<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br />
</div>
</form>
</body>

That said, if you're using jquery anyway, you might want to try it this way.

That said, instead of iterating over the child nodes, I'd probably just get the contents of the div (div.innerHTML), regex the <br />'s and replace with a newline, then use substring to split out the the first 30 characters from the rest.

Oh, and as suggested above, use a debugger.

Upvotes: 1

Ry-
Ry-

Reputation: 224858

There is only one element returned by document.getElementById; don't try to loop over it.

window.onload = function() {
    alert("Start");

    var intro = document.getElementById('EventContent');
    var els = intro.childNodes;

    for (var i = 0; i < els.length; i++) {
        alert(els[i].tagName);
    }

    alert("Stop");
};

And as for your final goal of retrieving only text, try this:

function getText(element) {
    var i, c, r = '';

    for(i = 0; c = element.childNodes[i]; i++) {
        if(c.nodeType === 3) {
            r += c.nodeValue;
        }
    }

    return r.replace(/^\s+|\s+$/g, '');
}

Upvotes: 1

Related Questions