Swift:ラベルまたはtextViewでHTMLデータを表示します


83

見出し、段落、画像、リストタグを含むHTMLデータがいくつかあります。

1にこのデータを表示する方法があるUITextViewかはUILabel


1
UITextViewまたはUILabelの代わりにUIWebViewを使用します。したがって、画像を含めて表示されます
Tyson Vignesh 2016

はい、あなたは正しいと思います@TysonVignesh
Talha Ahmad Khan

@TysonVignesh UIWebViewを使用してHTMLを表示するにはどうすればよいですか?
Mohamed Ezzat 2018

回答:


206

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 ?? ""
    }
}

次に、HTMLテキストをUITextViewに配置する場合は、次を使用します。

textView.attributedText = htmlText.htmlToAttributedString

6
これは私にとってはうまくいきましたが、代わりにlabel.attributedTextを使用する必要がありました。
ブレントワゴナー2017

すごい!東ヨーロッパのラテン文字の場合、エンコーディングデータをUnicodeに変更する必要がありました。
nja 2018年

すごい!ただし、電話をかけるときはlabel.attributedTextをlabel.textにする必要があります
Sazzad Hissain Khan 2018

6
これは画像を保存することになっていますか?
daredevil1234 2018

1
@Roger Carvalho:含まれているhtmlタグのfont-family、-sizeなどを設定する方法はありますか?
Bernhard Engl

35

これがSwift3バージョンです:

private func getHtmlLabel(text: String) -> UILabel {
    let label = UILabel()
    label.numberOfLines = 0
    label.lineBreakMode = .byWordWrapping
    label.attributedString = stringFromHtml(string: text)
    return label
}

private func stringFromHtml(string: String) -> NSAttributedString? {
    do {
        let data = string.data(using: String.Encoding.utf8, allowLossyConversion: true)
        if let d = data {
            let str = try NSAttributedString(data: d,
                                             options: [NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType],
                                             documentAttributes: nil)
            return str
        }
    } catch {
    }
    return nil
}

私はここで他のいくつかの答えに問題を見つけました、そしてこれを正しくするのに少し時間がかかりました。HTMLが複数行にまたがるときにラベルのサイズが適切になるように、改行モードと行数を設定しました。


HTMLが解析されました...しかし正しくありません。タグは表示されなくなりますが、太字のテキストは表示されません。どのタグがサポートされているかわかりませんが、サポートされていない可能性<b>があります。
パブロ

太字のタグは私にとっては問題なく機能します。動作していない完全なHTMLを投稿できますか?使用しているフォントが太字で表示されない可能性があります。
garie 2017年

htmlは、CMSエディターからの単なるテキストであり、JSON文字列を返すようにエンコードされています。アプリはWebサービスにアクセスし、この特定のテキストオブジェクトを含むJSONを取得します。ここでのクライアントからの要件は、WebサイトのCMS(ワードプレス)と同様に、テキストにhtmlタグを追加できることです。たぶん私はリターンを間違ってエンコードしていますか?JSONを解析すると、デバッグ時に文字列returnが出力され、「<b> </ b>」を含めて正しく表示されますが、エミュレーターとテスト用デバイスの両方で、タグが機能しません。私はスウィフト3.使用しています
パブロ・

3
カスタムフォントを追加するにはどうすればよいですか?
バビンラマニ2017

14

この拡張機能を追加して、htmlコードを通常の文字列に変換します。

    extension String {

        var html2AttributedString: NSAttributedString? {
            guard
                let data = dataUsingEncoding(NSUTF8StringEncoding)
            else { return nil }
            do {
                return try NSAttributedString(data: data, options: [NSDocumentTypeDocumentAttribute:NSHTMLTextDocumentType,NSCharacterEncodingDocumentAttribute:NSUTF8StringEncoding], documentAttributes: nil)
            } catch let error as NSError {
                print(error.localizedDescription)
                return  nil
            }
        }
        var html2String: String {
            return html2AttributedString?.string ?? ""
        }
}

次に、UITextViewまたはUILabel内に文字列を表示します

textView.text = yourString.html2String または

label.text = yourString.html2String

1
はい。ただし、HTMLのテキストに対してのみ機能します。画像やリストも気になりました。画像やリストを単一のオブジェクトで表示する方法はありますか?
Talha Ahmad Khan 2016

@TalhaAhmadKhan画像がある場合は、UIWebViewを直接使用できます。ご存知のように、TextViewまたはラベルは機能しません。
Sathe_Nagaraja 2018

8

その後、テキストの属性を変更するのに問題があり、他の人が理由を尋ねているのを見ることができました...

したがって、最良の答えは、代わりにNSMutableAttributedStringで拡張機能を使用することです。

extension String {

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

}

そして、次のように使用できます。

if let labelTextFormatted = text.htmlToAttributedString {
                let textAttributes = [
                    NSAttributedStringKey.foregroundColor: UIColor.white,
                    NSAttributedStringKey.font: UIFont.boldSystemFont(ofSize: 13)
                    ] as [NSAttributedStringKey: Any]
                labelTextFormatted.addAttributes(textAttributes, range: NSRange(location: 0, length: labelTextFormatted.length))
                self.contentText.attributedText = labelTextFormatted
            }

同じことを達成したいのですが、上記のコードが機能していません。
PratyushPratik19年

7

Swift 3.0

var attrStr = try! NSAttributedString(
        data: "<b><i>text</i></b>".data(using: String.Encoding.unicode, allowLossyConversion: true)!,
        options: [ NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType],
        documentAttributes: nil)
label.attributedText = attrStr

6

私はこれを使用しています:

extension UILabel {
    func setHTML(html: String) {
        do {
            let attributedString: NSAttributedString = try NSAttributedString(data: html.data(using: .utf8)!, options: [NSDocumentTypeDocumentAttribute : NSHTMLTextDocumentType], documentAttributes: nil)
            self.attributedText = attributedString
        } catch {
            self.text = html
        }
    }
}

1
これは良いことですが、UILabelにのみ適用されます。それがhtmlを取り、属性付きテキストに変換する必要がある汎用拡張である場合は、はるかに優れています。
i.AsifNoor

4

スウィフト3

extension String {


var html2AttributedString: NSAttributedString? {
    guard
        let data = data(using: String.Encoding.utf8)
        else { return nil }
    do {
        return try NSAttributedString(data: data, options: [NSDocumentTypeDocumentAttribute:NSHTMLTextDocumentType,NSCharacterEncodingDocumentAttribute:String.Encoding.utf8], documentAttributes: nil)
    } catch let error as NSError {
        print(error.localizedDescription)
        return  nil
    }
}
var html2String: String {
    return html2AttributedString?.string ?? ""
 }
}

1
swift 3.1 NSCharacterEncodingDocumentAttribute:String.Encoding.utf8.rawValue
Can Aksoy

3

スウィフト5

extension UIColor {
    var hexString: String {
        let components = cgColor.components
        let r: CGFloat = components?[0] ?? 0.0
        let g: CGFloat = components?[1] ?? 0.0
        let b: CGFloat = components?[2] ?? 0.0

        let hexString = String(format: "#%02lX%02lX%02lX", lroundf(Float(r * 255)), lroundf(Float(g * 255)),
                               lroundf(Float(b * 255)))

        return hexString
    }
}
extension String {
    func htmlAttributed(family: String?, size: CGFloat, color: UIColor) -> NSAttributedString? {
        do {
            let htmlCSSString = "<style>" +
                "html *" +
                "{" +
                "font-size: \(size)pt !important;" +
                "color: #\(color.hexString) !important;" +
                "font-family: \(family ?? "Helvetica"), Helvetica !important;" +
            "}</style> \(self)"

            guard let data = htmlCSSString.data(using: String.Encoding.utf8) else {
                return nil
            }

            return try NSAttributedString(data: data,
                                          options: [.documentType: NSAttributedString.DocumentType.html,
                                                    .characterEncoding: String.Encoding.utf8.rawValue],
                                          documentAttributes: nil)
        } catch {
            print("error: ", error)
            return nil
        }
    }
}

そして最後に、UILabelを作成できます。

func createHtmlLabel(with html: String) -> UILabel {
    let htmlMock = """
    <b>hello</b>, <i>world</i>
    """

    let descriprionLabel = UILabel()
    descriprionLabel.attributedText = htmlMock.htmlAttributed(family: "YourFontFamily", size: 15, color: .red)

    return descriprionLabel
}

結果:

ここに画像の説明を入力してください

チュートリアルを参照してください:

https://medium.com/@valv0/a-swift-extension-for-string-and-html-8cfb7477a510


2

これを試して:

let label : UILable! = String.stringFromHTML("html String")

func stringFromHTML( string: String?) -> String
    {
        do{
            let str = try NSAttributedString(data:string!.dataUsingEncoding(NSUTF8StringEncoding, allowLossyConversion: true
                )!, options:[NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType, NSCharacterEncodingDocumentAttribute: NSNumber(unsignedLong: NSUTF8StringEncoding)], documentAttributes: nil)
            return str.string
        } catch
        {
            print("html error\n",error)
        }
        return ""
    }

お役に立てば幸いです。


はい。ただし、HTMLのテキストに対してのみ機能します。画像やリストも気になりました。画像やリストを単一のオブジェクトで表示する方法はありますか?
Talha Ahmad Khan 2016

3
使用NSHTMLTextDocumentType非常に遅いことに注意してください[1]。代わりに、DDHTMLのようなライブラリを使用してみてください。[1] robpeck.com/2015/04/nshtmltextdocumenttype-is-slow
クリストファーケビンハウエル

2

ここでは上記の答えのためのTHXはあるスウィフト4.2


extension String {

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

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

2

Swift 5の場合、cssをロードすることもできます。

extension String {
    public var convertHtmlToNSAttributedString: 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 {
            print(error.localizedDescription)
            return nil
        }
    }

    public func convertHtmlToAttributedStringWithCSS(font: UIFont? , csscolor: String , lineheight: Int, csstextalign: String) -> NSAttributedString? {
        guard let font = font else {
            return convertHtmlToNSAttributedString
        }
        let modifiedString = "<style>body{font-family: '\(font.fontName)'; font-size:\(font.pointSize)px; color: \(csscolor); line-height: \(lineheight)px; text-align: \(csstextalign); }</style>\(self)";
        guard let data = modifiedString.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 {
            print(error)
            return nil
        }
    }
}

その後、NSAttributedStringに変換する文字列に移動し、次の例のように配置します。

myUILabel.attributedText = "Swift is awesome&#33;&#33;&#33;".convertHtmlToAttributedStringWithCSS(font: UIFont(name: "Arial", size: 16), csscolor: "black", lineheight: 5, csstextalign: "center")

ここに画像の説明を入力してください すべてのパラメータが取るものは次のとおりです。

  • フォント:カスタムフォントの名前とサイズを指定したUIFontを使用して、UILabel / UITextViewで通常行うようにフォントを追加します。
  • csscolor:「#000000」のようにHEX形式で色を追加するか、「黒」のように色の名前を使用します。
  • lineheight:UILabel / UITextViewに複数の行がある場合の行間のスペースです。
  • csstextalign:テキストの配置です。追加する必要のある値は、「左」または「右」または「中央」または「位置揃え」です。

参照:https//johncodeos.com/how-to-display-html-in-uitextview-uilabel-with-custom-color-font-etc-in-ios-using-swift/



1

UITextViewまたはUILabelで画像やテキスト段落を表示することはできませんUIWebView。これには、を使用する必要があります。

ストーリーボードにアイテムを追加し、コードにリンクし、それを呼び出してURLをロードするだけです。

OBJ-C

NSString *fullURL = @"http://conecode.com";
NSURL *url = [NSURL URLWithString:fullURL];
NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
[_viewWeb loadRequest:requestObj];

迅速

let url = NSURL (string: "http://www.sourcefreeze.com");
let requestObj = NSURLRequest(URL: url!);
viewWeb.loadRequest(requestObj);

ステップバイステップのチュートリアル。 http://sourcefreeze.com/uiwebview-example-using-swift-in-ios/


その両方で可能です。文字列は適切にエンコードする必要があります
froggomad 2018

1

スウィフト5

extension String {
    func htmlAttributedString() -> NSAttributedString? {
        guard let data = self.data(using: String.Encoding.utf16, allowLossyConversion: false) else { return nil }
        guard let html = try? NSMutableAttributedString(
            data: data,
            options: [NSAttributedString.DocumentReadingOptionKey.documentType: NSAttributedString.DocumentType.html],
            documentAttributes: nil) else { return nil }
        return html
    }
}

コール:

myLabel.attributedText = "myString".htmlAttributedString()

-1

使用できる内部にHTMLコードを含む文字列がある場合:

extension String {
var utfData: Data? {
        return self.data(using: .utf8)
    }

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

    var htmlString: String {
        return htmlAttributedString?.string ?? self 
    }
}

そしてあなたが使用するあなたのコードで:

label.text = "something".htmlString
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.