Swift: Display HTML Data in a Label or Textview

Swift: Display HTML data in a label or textView

For Swift 5:

extension String {
    var htmlToAttributedString: NSAttributedString? {
        guard let data = data(using: .utf8) else { return nil }
        do {
            return try NSAttributedString(data: data, options: [.documentType: NSAttributedString.DocumentType.html, .characterEncoding:String.Encoding.utf8.rawValue], documentAttributes: nil)
        } catch {
            return nil
        }
    }
    var htmlToString: String {
        return htmlToAttributedString?.string ?? ""
    }
}

Then, whenever you want to put HTML text in a UITextView use:

textView.attributedText = htmlText.htmlToAttributedString

How to display HTML text(as string) on UILabel with hyperlinks?

@IBOutlet weak var testLabel: UILabel!

let message = "Please <a href='https://www.google.com'>click here</a> to search"

@override func viewDidLoad() {
   super.viewDidLoad()
   formatLabel(with: message.htmlToString)
}

func formatLabel(with message: String) {
   let formattedText = String.format(strings: ["click here"],
                                     boldFont:  UIFont.init(name: "Roboto-Bold", size: 16.0)!,
                                     boldColor: UIColor.blue,
                                     inString: message,
                                     font: UIFont.init(name: "Roboto-Regular", size: 16.0)!,
                                     color: UIColor(red: 33/255, green: 136/255, blue: 189/255, alpha: 1.0))
   testLabel.attributedText = formattedText
   testLabel.numberOfLines = 0
   let tap = UITapGestureRecognizer(target: self, action: #selector(handleTermTapped))
   testLabel.addGestureRecognizer(tap)
   testLabel.isUserInteractionEnabled = true
   testLabel.textAlignment = .center
}

@objc func handleTermTapped(gesture: UITapGestureRecognizer) {
   let clickString = (testLabel.text ?? "") as NSString
   let clickRange = clickString.range(of: "click here")

   let tapLocation = gesture.location(in: testLabel)
   let index = testLabel.indexOfAttributedTextCharacterAtPoint(point: tapLocation)

   if checkRange(clickRange, contain: index) == true {
       guard let url = URL(string: "https://www.google.com") else { return }
       UIApplication.shared.open(url, options: [:], completionHandler: nil)
       return
   }

}

Helper function and extensions:

func checkRange(_ range: NSRange, contain index: Int) -> Bool {
    return index > range.location && index < range.location + range.length
}

extension String {
    static func format(strings: [String],
                       boldFont: UIFont = UIFont.init(name: "Roboto-Bold", size: 16.0)!,
                       boldColor: UIColor = UIColor.blue,
                       inString string: String,
                       font: UIFont = UIFont.init(name: "Roboto-Regular", size: 16.0)!,
                       color: UIColor = UIColor(red: 33/255, green: 136/255, blue: 189/255, alpha: 1.0)) -> NSAttributedString {
        let attributedString =
            NSMutableAttributedString(string: string,
                                      attributes: [
                                        NSAttributedString.Key.font: font,
                                        NSAttributedString.Key.foregroundColor: color])
        let boldFontAttribute = [NSAttributedString.Key.font: boldFont, NSAttributedString.Key.foregroundColor: boldColor]
        for bold in strings {
            attributedString.addAttributes(boldFontAttribute, range: (string as NSString).range(of: bold))
        }
        return attributedString
    }

   var htmlToAttributedString: NSAttributedString? {
        guard let data = data(using: .utf8) else { return NSAttributedString() }
        do {
            return try NSAttributedString(data: data, options: [.documentType: NSAttributedString.DocumentType.html, .characterEncoding:String.Encoding.utf8.rawValue], documentAttributes: nil)
        } catch {
            return NSAttributedString()
        }
    }

    var htmlToString: String {
        return htmlToAttributedString?.string ?? ""
    }
}

extension UILabel {
    func indexOfAttributedTextCharacterAtPoint(point: CGPoint) -> Int {
        let textStorage = NSTextStorage(attributedString: self.attributedText!)
        let layoutManager = NSLayoutManager()
        textStorage.addLayoutManager(layoutManager)
        let textContainer = NSTextContainer(size: self.frame.size)
        textContainer.lineFragmentPadding = 0
        textContainer.maximumNumberOfLines = self.numberOfLines
        textContainer.lineBreakMode = self.lineBreakMode
        layoutManager.addTextContainer(textContainer)

        let index = layoutManager.characterIndex(for: point, in: textContainer, fractionOfDistanceBetweenInsertionPoints: nil)
        return index
    }
}

Displaying HTML content in UITextView

Try This

var attrStr = try! NSAttributedString(
            data: "<b><i>text</i></b>".data(using: String.Encoding.unicode, allowLossyConversion: true)!,
            options:[NSAttributedString.DocumentReadingOptionKey.documentType: NSAttributedString.DocumentType.html], documentAttributes: nil)
        YOUR_TEXTVIEW.attributedText = attrStr

swift: The HTML data converted to NSAttributed string doesn't make the links clickable in label

From your line:

simpleTextLabel.attributedText = text.htmlToAttributedString

We can assume that simpleTextLabel is a UILabel.

It's basic behavior from a UILabel to not be "interactable". You can add a tap gesture on it, but it transform it as a UIButton.

There are some tricks to make it possible with a UILabel, find where exactly it has been tapped, check if there is a link, etc.
Looking for "UILabel Clickable": Create tap-able "links" in the NSAttributedString of a UILabel? etc. There are even a few third party libs.

I (in my humble opinion) consider it as a "hack".

There is a good WWDC 2018 Session: TextKit Best Practices. At 2:34, it explains that if you need to interact with a shown text, prefers UITextView over UILabel.

There is a UITextViewDelegate method just for that: textView(_:shouldInteractWith:in:interaction:)

Note that there a small differences in the rendering of a UITextView and a UILabel. If you superpose them, they won't have the same "start point", the layout is a little different. However, with small changes, it can be the same (for instance: How can I make a UITextView layout text the same as a UILabel?).

Note also that according to the small modifications of a UITextView into a UILabel visual rendering, the user won't notice the difference (and that's in fact what matters, beside that using native methods of the UITextView/UITextViewDelegate make it easily understandable afterwards by another developer, or in a few months if you need to do a small modification).

---

Related Topics