CODEWITHSUNDEEP
javascriptjqueryknockout.jsdata-bindingforeach
IAMABANANA
IAMABANANA

Reputation: 155

How to remove HTML tags from Knockout Text binding?

So I have a foreach loop that displays your list of messages that contains the date sent/computed short message/computed short message/status. I tried binding the short message as an HTML data-bind, but that causes the issue of it bringing in the new line breaks since the message comes in from an HTML editor. So I thought maybe there is a way to use the text data-bind and just remove the HTML tags from it.

Anyone know of a way to do this?

HTML:

 <table class="table table-hover table-striped table-bordered text-center">
                            <thead>
                                <tr class="bg-success">
                                    <th width="15%" class="table-title" data-bind="click: sortMessageType" style="cursor: pointer">Message Type </th>
                                    <th width="25%" class="table-title" data-bind="click: sortSubject" style="cursor: pointer">Subject </th>
                                    <th width="40%" class="table-title" data-bind="click: sortMessage" style="cursor: pointer">Message </th>
                                    <th width="20%" class="table-title" data-bind="click: function(data, event) { sortDateCreated( $data, event ) }" style="cursor: pointer">Date Created </th>

                                </tr>
                            </thead>
                            <tbody data-bind="foreach: VisibleTemplates">
                                <tr>
                                    <td class="mailbox-subject" data-bind="click: function(data, event) { $parent.selectTemplate( $data, event ) }, text: $data.MessageType"></td>
                                    <td class="mailbox-subject" data-bind="click: function(data, event) { $parent.selectTemplate( $data, event ) }, text: $data.ShortSubject"></td>
                                    <td class="mailbox-subject" data-bind="click: function(data, event) { $parent.selectTemplate( $data, event ) }, text: $data.ShortMessage"></td>
                                    <td class="mailbox-subject" data-bind="click: function(data, event) { $parent.selectTemplate( $data, event ) }, text: $data.DateTime"></td>
                                </tr>
                            </tbody>
                        </table>

Knockout:

 self.ShortSubject = ko.computed(function () {
        if (self.Subject().length < 20) {
            return self.Subject();
        }
        else {
            return self.Subject().substring(0, 20) + '...';
        }
    });

    self.ShortMessage = ko.computed(function () {
        if (self.Message().length < 50) {
            return self.Message();
        }
        else {
            return self.Message().substring(0, 50) + '...';
        }
    });

Upvotes: 0

Views: 1654

Answers (1)

JotaBe
JotaBe

Reputation: 39055

Your real problem is removing the HTML from the input text. In knockout you can use computed observables, or custom bindings to process the entry and removing the tags before showing it.

The problem of removing tags can be solved in several ways. For example, you can use this solution: Strip HTML from Text JavaScript (for example putting your text in a hidden or detached div), which is explained in a different way here.

Upvotes: 0

Related Questions