Populating cell label with attributed string from HTML with custom CSS classes

Question

Any one knows how to do this? Having a custom cell, The sub label is a HTML snippet, with custom css classes that needs to be there to colour the text in specific places.

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = self.tableView!.dequeueReusableCellWithIdentifier("SearchResCell", forIndexPath: indexPath) as! SearchResCell

    if self.searchStore != nil && self.searchStore.searchResult.count > 0 && self.searchStore.searchResult[0].searchResults.count > 0 {
        let searchRes = searchStore.searchResult[0].searchResults[indexPath.row]

        cell.titleLabel.text = searchRes.displayTitle
        cell.titleLabel.textColor = UIColor.blueColor()

        let attrResult = try! NSAttributedString(
            data: searchRes.wordsClean.dataUsingEncoding(NSUnicodeStringEncoding, allowLossyConversion: true)!,
            options: [ NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType],
            documentAttributes: nil)
        cell.subtitleLabel.attributedText = attrResult
        cell.subtitleLabel.textAlignment = NSTextAlignment.Right

    }

    return cell
}

in the attrResult there is html with css class (lets say ABC ). Is there a way in the attributed string to say that is Foo class? or is there any other way except from using regex or string manipulation on every string that i get form the API? it can be hundreds and it is not my API so i can't change the HTML tags in it.

HTML Text Example:

bla bla bla <span class="HightlightTextClass"> highlighted text </span> more bla bra bra text

"

10x

Try this answer http://stackoverflow.com/a/28132610/5222077 (I'm not 100% sure it supports cutom css, it might support inline css) — kye, Jun 05 '16 at 15:42
Added a string example for the type os text i am getting from the API, the class in the span is for highlighting the text for that span and i need to highlight the same text... 10x — Erez, Jun 05 '16 at 15:44
I'm not very familiar with CSS, but: Are your classes present in the HTML snippet you got from server? I mean, there declaration and properties? If not, why not redefined them each time and add it at the beginning of the html string? — Larme, Jun 07 '16 at 08:51
Hi @Larme, I soled the problem, look at my answer at the bottom... The API response is a HTML string, and HTML can have design inside it, it can be STYLE or CLASS, the problem is when you develop a website you have a css file attached to the project and the styles are in that file, when we develop in native we don't have that file, so i just changed every class in the HTML string to style with the right style and that is working great. Hoped that help you — Erez, Jun 07 '16 at 14:15

score 1 · Answer 1 · answered Jun 05 '16 at 15:47

1

You could try to insert a custom style tag using regex or similar, or you could adjust the font, color, background color, etc. by actually using the document attributes of the attributed string.

answered Jun 05 '16 at 15:47

Coder-256

5,212
2
23
51

so there no way to control the class in a NSHTMLTextDocumentType ? – Erez Jun 05 '16 at 16:37
10x, I've posted the solution, based on your suggestions so i gave you point – Erez Jun 05 '16 at 16:57

score 0 · Answer 2 · answered Jun 05 '16 at 16:56

If any one interested this is full solution for this issue, worked like a charm for me:

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = self.tableView!.dequeueReusableCellWithIdentifier("SearchResCell", forIndexPath: indexPath) as! SearchResCell

    if self.searchStore != nil && self.searchStore.searchResult.count > 0 && self.searchStore.searchResult[0].searchResults.count > 0 {
        let searchRes = searchStore.searchResult[0].searchResults[indexPath.row]

        cell.titleLabel.text = searchRes.displayTitle
        cell.titleLabel.textColor = UIColor.blueColor()

        if let regex = try? NSRegularExpression(pattern: "class=\"hlt\"", options: .CaseInsensitive) {
            let modStr = regex.stringByReplacingMatchesInString(searchRes.wordsClean, options: .WithTransparentBounds, range: NSMakeRange(0, searchRes.wordsClean.characters.count), withTemplate: "style=\"background-color:#F7DB6A\"")

            let attrResult = try! NSAttributedString(
                data: modStr.dataUsingEncoding(NSUnicodeStringEncoding, allowLossyConversion: true)!,
                options: [ NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType],
                documentAttributes: nil)

            cell.subtitleLabel.attributedText = attrResult
            cell.subtitleLabel.textAlignment = NSTextAlignment.Right

        }
    }

    return cell
}

Populating cell label with attributed string from HTML with custom CSS classes

2 Answers2