How to remove HTML tags from Knockout Text binding?

Question

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) + '...';
        }
    });

I would create a handler specific to this control. In side the handler, you can manipulate the data, such as removing line feeds, or unwanted html, if I understand what you are asking. — Bindrid
Possibly Knockout extenders (knockoutjs.com/documentation/extenders.html) could help you. Section "Live Example 1: Forcing input to be numeric" describes how to solve similar task - process entered value. — TSV

JotaBe JotaBe · Accepted Answer · 2015-12-29T09:01:38

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.

How to remove HTML tags from Knockout Text binding?

1 Answers