How to show an HTML string on a UILabel in iOS?

Question

I am getting a title in HTML format as

Example

I need to show this HTML string in a UILabel. The color code and the font size should be same as the coming in HTML. When I am converting the HTML string into a NSString, only the text "Example" is coming, and not the color.

Is there any solution?

Thnx in advance

Till now I am trying by using a NSAttributedString in following way but by this way the whole HTML is printing:

UIFont *font = [UIFont systemFontOfSize:14.0];
UIFont *secondFont = [UIFont systemFontOfSize:10.0];

NSMutableDictionary *firstAttributes;
NSMutableDictionary *secondAttributes;

NSDictionary *firstAttributeFont = @{NSFontAttributeName:font};
NSDictionary *secondAttributeFont = @{NSFontAttributeName:secondFont};

[firstAttributes addEntriesFromDictionary:firstAttributeFont];
[secondAttributes addEntriesFromDictionary:secondAttributeFont];

[firstAttributes addEntriesFromDictionary:@{NSForegroundColorAttributeName:[UIColor clearColor]}];
[secondAttributes addEntriesFromDictionary:@{NSForegroundColorAttributeName:[UIColor clearColor]}];



NSString* completeString = [NSString stringWithFormat:@"%@",strTitle];
NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc]     initWithString:completeString];
[attributedString setAttributes:firstAttributes range:[completeString rangeOfString:strTitle]];
//   [attributedString setAttributes:secondAttributes range:[completeString rangeOfString:self.secondAttributeText]];
Cell.lbl_Title.attributedText = attributedString;

score 130 · Answer 1 · edited Jan 31 '19 at 02:15

130

For iOS7 or more you can use this:

NSString * htmlString = @"<html><body> Some html string </body></html>";
NSAttributedString * attrStr = 
  [[NSAttributedString alloc] initWithData:[htmlString dataUsingEncoding:NSUnicodeStringEncoding] 
                                   options:@{NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType}
                        documentAttributes:nil error:nil];

UILabel * myLabel = [[UILabel alloc] init];
myLabel.attributedText = attrStr;

edited Jan 31 '19 at 02:15

Bill

44,502
24
122
213

answered Apr 13 '14 at 19:22

sanjana

3,034
2
25
31

3

It works, but how can I catch a "touch" event on the UILabel? – lenhhoxung May 03 '15 at 12:45
@lenhhoxung my advice for u, try to use UIButton instead of UILabel or add UIButton above your label, it's kinda easy way to achieve what you want. – Resty May 21 '15 at 19:27
2

Thanks, but I just want to catch "touch" event on the link inside html content, not all the label – lenhhoxung May 21 '15 at 20:56
@Nilesh Can you please post your code? If it works for everyone but for you..there might be something wrong with your code. – sanjana Aug 12 '15 at 05:15
@lenhhoxung Did you find the answer to your question? – A_G Jul 06 '17 at 11:19
@AsthaGupta This solution, upvoted by 96 times, doesn't work for you? – lenhhoxung Jul 06 '17 at 13:09
1

@lenhhoxung I wasn't looking for an answer for this question. I wanted clickable links. Replaced UILabel with UITextView. Works like a charm :) – A_G Jul 06 '17 at 13:14

score 29 · Answer 2 · edited Nov 14 '16 at 14:52

29

Swift 2

let htmlText = "<p>etc</p>"

if let htmlData = htmlText.dataUsingEncoding(NSUnicodeStringEncoding) {
    do {
        someLabel.attributedText = try NSAttributedString(data: htmlData,
            options: [NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType],
            documentAttributes: nil)
    } catch let e as NSError {
        print("Couldn't translate \(htmlText): \(e.localizedDescription) ")
    }
}

Swift 3

let htmlText = "<p>etc</p>"

if let htmlData = htmlText.data(using: String.Encoding.unicode) {
    do {
        let attributedText = try NSAttributedString(data: htmlData, options: [NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType], documentAttributes: nil)
    } catch let e as NSError {
        print("Couldn't translate \(htmlText): \(e.localizedDescription) ")
    }
}

edited Nov 14 '16 at 14:52

Michal

15,429
10
73
104

answered Jan 26 '16 at 06:40

BaseZen

8,650
3
35
47

1

just added Swift 3 into your "Swift troll translation" ;) it was quite handy to find it. – Michal Nov 14 '16 at 14:53
`` tags are highlighted but don't work. Any idea how to get it to work? – Nagendra Rao Apr 04 '17 at 15:00
UILabels are not meant to be interactive at all. Look into UITextField http://stackoverflow.com/questions/21629784/how-to-make-a-clickable-link-in-an-nsattributedstring-for-a – BaseZen Apr 04 '17 at 16:12
3

Does not work in Swift 4 Cannot convert value of type 'NSAttributedString.DocumentAttributeKey' to expected dictionary key type 'NSAttributedString.DocumentReadingOptionKey' – Mohammad Razipour Jan 14 '18 at 09:28

score 21 · Answer 3 · edited Feb 03 '19 at 08:31

21

Swift 4+

For Swift 4 and above use:

guard let data = "foo".data(using: String.Encoding.unicode) else { return }

try? titleLabel.attributedText = 
   NSAttributedString(data: data,
                   options: [.documentType:NSAttributedString.DocumentType.html], 
        documentAttributes: nil)

edited Feb 03 '19 at 08:31

Lena Bru

13,521
11
61
126

answered Feb 06 '18 at 14:30

Jakub Truhlář

20,070
9
74
84

its making uitableview to stuck on scroll , even if I tried on thread – Kishore Kumar Aug 01 '18 at 11:05

mak · Answer 4 · 2013-11-13T07:34:19.800

6

I did this on UITextView as follows:

[detailView loadHTMLString:[NSString stringWithFormat:@"<div style='text-align:justify; font-size:13px;font-family:HelveticaNeue;color:#362932;'>%@",[model.dict valueForKey:@"description"]] baseURL:nil];

Or you can use RTLabel library: https://github.com/honcheng/RTLabel to display html text along with its formatting on a label.

edited Nov 13 '13 at 07:34

answered Nov 13 '13 at 07:25

mak

1,173
1
12
18

6

Don't use loadHTMLString, it's a private api. – Beuj Jan 10 '14 at 15:54

score 5 · Answer 5 · edited Jun 20 '20 at 09:12

5

Extension for Swift 4+

extension UILabel {
  func set(html: String) {
    if let htmlData = html.data(using: .unicode) {
      do {
        self.attributedText = try NSAttributedString(data: htmlData,
                                                     options: [.documentType: NSAttributedString.DocumentType.html],
                                                     documentAttributes: nil)
      } catch let e as NSError {
        print("Couldn't parse \(html): \(e.localizedDescription)")
      }
    }
  }
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 12 '16 at 10:16

Orkhan Alikhanov

9,122
3
39
60

I don't know why it takes little longer time (approx. 3 to 5 sec) to load initially? – iAj Aug 05 '17 at 10:40
1

@iajmeri43 See [this answer](https://stackoverflow.com/a/32125260/5555803). – Orkhan Alikhanov Aug 05 '17 at 10:44
Got it... tnx alot.. @Orkhan Alikhanov – iAj Aug 05 '17 at 10:48

score 4 · Answer 6 · edited Mar 08 '18 at 03:31

4

-(NSString*)convertHtmlPlainText:(NSString*)HTMLString{
    NSData *HTMLData = [HTMLString dataUsingEncoding:NSUTF8StringEncoding];
    NSAttributedString *attrString = [[NSAttributedString alloc] initWithData:HTMLData options:@{NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType} documentAttributes:NULL error:NULL];
    NSString *plainString = attrString.string;

    return plainString;
}

UILabel * htmlLabel = [UILabel alloc] init];
htmlLabel.text = [self convertHtmlPlainText:htmlResponse];

edited Mar 08 '18 at 03:31

pkamb

33,281
23
160
191

answered Aug 19 '14 at 07:31

Adarsh G J

2,684
1
24
25

`attributedStringWithHTML` does not exist. `attrString` declaration/init should be replaced by: `NSAttributedString *attrString = [[NSAttributedString alloc] initWithData:HTMLData options:@{NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType} documentAttributes:NULL error:NULL];` – atxe Dec 23 '14 at 16:46

score 0 · Answer 7 · answered Dec 27 '17 at 06:57

If Html Text is like

var planeText = "Unseen and not Purchased!"
//setting color to the text
var htmlText = "<font color=\"#f20707\">" + planeText + "</font>"

We can set the text to UILabel like this

if let htmlData = htmlText.data(using: String.Encoding.unicode) {
    do {
         let attributedText = try NSAttributedString(data: htmlData,
             options: [NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType], 
             documentAttributes: nil)   
         //Setting htmltext to uilable 
         uilable.attributedText = attributedText

       } catch let e as NSError {
         //setting plane text to uilable cause of err
         uilable.text = planeText
         print("Couldn't translate \(htmlText): \(e.localizedDescription) ")
       }
}

How to show an HTML string on a UILabel in iOS?

7 Answers7

Swift 4+

Extension for Swift 4+

Linked