Swift : Regex for remove all inline HTML attributes

Question

I want to clear all attributes from an HTML String text. I've found a lot of answers to do that but the problem is the grammer for regex is not working if we don't have a properly CSS style. and my situation was difficult because the HTML text that get from an API is not in order with its style. It might be like this:

Angkor Wat is a temple complex in Cambodia and the largest religious monument in the world, on a site measuring 162.6 hectares (1,626,000 m2; 402 acres). It was originally constructed as a Hindu temple dedicated to the god Vishnu for the Khmer Empire, gradually transforming into a Buddhist temple towards the end of the 12th century. It was built by the Khmer King Suryavarman II in the early 12th century in Yaśodharapura, the capital of the Khmer Empire, as his state temple and eventual mausoleum. Breaking from the Shaiva tradition of previous kings, Angkor Wat was instead dedicated to Vishnu. As the best-preserved temple at the site, it is the only one to have remained a significant religious centre since its foundation. The temple is at the top of the high classical style of Khmer architecture. It has become a symbol of Cambodia, appearing on its national flag, and it is the country\'s prime attraction for visitors.
Angkor Wat combines two basic plans of Khmer temple architecture: the temple-mountain and the later galleried temple. It is designed to represent Mount Meru, home of the devas in Hindu mythology: within a moat and an outer wall 3.6 kilometres (2.2 mi) long are three rectangular galleries, each raised above the next. At the centre of the temple stands a quincunx of towers. Unlike most Angkorian temples, Angkor Wat is oriented to the west; scholars are divided as to the significance of this. The temple is admired for the grandeur and harmony of the architecture, its extensive bas-reliefs, and for the numerous devatas adorning its walls.

You can test this string by copy and paste the whole text into this website because I want to find the correct Regex that can remove all CSS style.

I want the regex that can work like this Useful HTML Cleaner Website

This is before cleaning the HTML:

And this is after cleaning the HTML:

These website can clean all HTML attribute and it doesn't care if those attribute is in the wrong format

I found many Regex on the website that can clean the html attribute but it's not working with my situation: Here are some regex:

<[^>]+((style|class)="[^"]*")[^>]*>
<\s*([a-z][a-z0-9]*)\s.*?>
style="([^"]*)"
style="(.*?)"
<\s*([a-z][a-z0-9]*)\s.*?>

EDIT here is a useful function that can remove the style from Tobi:

let regex = try! NSRegularExpression(pattern: "style="([^"]*)"", options: .caseInsensitive)
        let range = NSMakeRange(0, html.characters.count)
        let modString = regex.stringByReplacingMatches(in: html, options: [], range: range, withTemplate: "")

And the result of this regex is still like this:

Angkor Wat is a temple complex in Cambodia and the largest religious monument in the world, on a site measuring 162.6 hectares (1,626,000 m2; 402 acres). It was originally constructed as a Hindu temple dedicated to the god Vishnu for the Khmer Empire, gradually transforming into a Buddhist temple towards the end of the 12th century. It was built by the Khmer King Suryavarman II in the early 12th century in Yaśodharapura, the capital of the Khmer Empire, as his state temple and eventual mausoleum. Breaking from the Shaiva tradition of previous kings, Angkor Wat was instead dedicated to Vishnu. As the best-preserved temple at the site, it is the only one to have remained a significant religious centre since its foundation. The temple is at the top of the high classical style of Khmer architecture. It has become a symbol of Cambodia, appearing on its national flag, and it is the country\'s prime attraction for visitors.
Angkor Wat combines two basic plans of Khmer temple architecture: the temple-mountain and the later galleried temple. It is designed to represent Mount Meru, home of the devas in Hindu mythology: within a moat and an outer wall 3.6 kilometres (2.2 mi) long are three rectangular galleries, each raised above the next. At the centre of the temple stands a quincunx of towers. Unlike most Angkorian temples, Angkor Wat is oriented to the west; scholars are divided as to the significance of this. The temple is admired for the grandeur and harmony of the architecture, its extensive bas-reliefs, and for the numerous devatas adorning its walls.

Please use this Website to test my given string

This regex can clear only the style that in format style=" " only

user_10395534 · Answer

You can use SwiftSoup to help you solve this problem. Here is my code

    do {
        let doc: Document = try SwiftSoup.parse(html)
        let elements = try doc.getAllElements()

        try elements.forEach { (el) in
            let attr = el.getAttributes()

            try attr?.forEach({ (att) in
                try el.removeAttr(att.getKey())
            })
        }
        print(try doc.body()?.html())
    } catch Exception.Error(let type, let message) {
        print(type,message)
    } catch {
        print("error")
    }

here is the result

Angkor Wat is a temple complex in Cambodia and the largest religious monument in the world, on a site measuring 162.6 hectares (1,626,000 m2; 402 acres). It was originally constructed as a Hindu temple dedicated to the god Vishnu for the Khmer Empire, gradually transforming into a Buddhist temple towards the end of the 12th century. It was built by the Khmer King Suryavarman II in the early 12th century in Yaśodharapura, the capital of the Khmer Empire, as his state temple and eventual mausoleum. Breaking from the Shaiva tradition of previous kings, Angkor Wat was instead dedicated to Vishnu. As the best-preserved temple at the site, it is the only one to have remained a significant religious centre since its foundation. The temple is at the top of the high classical style of Khmer architecture. It has become a symbol of Cambodia, appearing on its national flag, and it is the country\'s prime attraction for visitors.
Angkor Wat combines two basic plans of Khmer temple architecture: the temple-mountain and the later galleried temple. It is designed to represent Mount Meru, home of the devas in Hindu mythology: within a moat and an outer wall 3.6 kilometres (2.2 mi) long are three rectangular galleries, each raised above the next. At the centre of the temple stands a quincunx of towers. Unlike most Angkorian temples, Angkor Wat is oriented to the west; scholars are divided as to the significance of this. The temple is admired for the grandeur and harmony of the architecture, its extensive bas-reliefs, and for the numerous devatas adorning its walls.

hope this could help you :)

user_6541007 · Answer

It's not so easy as your HTML is completely broken. I recommend you to ask to your API designer why the API outputs this sort of completely broken HTML.

Anyway, if you need to work with this sort of HTML-like something using regex, you may need to detect opening tag and remove everything other than tag name:

import Foundation

let inputHTML = """
Angkor Wat is a temple complex in Cambodia and the largest religious monument in the world, on a site measuring 162.6 hectares (1,626,000 m2; 402 acres). It was originally constructed as a Hindu temple dedicated to the god Vishnu for the Khmer Empire, gradually transforming into a Buddhist temple towards the end of the 12th century. It was built by the Khmer King Suryavarman II in the early 12th century in Yaśodharapura, the capital of the Khmer Empire, as his state temple and eventual mausoleum. Breaking from the Shaiva tradition of previous kings, Angkor Wat was instead dedicated to Vishnu. As the best-preserved temple at the site, it is the only one to have remained a significant religious centre since its foundation. The temple is at the top of the high classical style of Khmer architecture. It has become a symbol of Cambodia, appearing on its national flag, and it is the country\'s prime attraction for visitors.
Angkor Wat combines two basic plans of Khmer temple architecture: the temple-mountain and the later galleried temple. It is designed to represent Mount Meru, home of the devas in Hindu mythology: within a moat and an outer wall 3.6 kilometres (2.2 mi) long are three rectangular galleries, each raised above the next. At the centre of the temple stands a quincunx of towers. Unlike most Angkorian temples, Angkor Wat is oriented to the west; scholars are divided as to the significance of this. The temple is admired for the grandeur and harmony of the architecture, its extensive bas-reliefs, and for the numerous devatas adorning its walls.
"""
let openingTagPattern = "(<[a-z0-9]+)\s*([^>]*)(/?>)"
class TagCleaningRegex: NSRegularExpression {
    override func replacementString(for result: NSTextCheckingResult, in string: String, offset: Int, template templ: String) -> String {
        print(string[Range(result.range, in: string)!])
        if
            result.numberOfRanges >= 4,
            case let attrRng = result.range(at: 2),
            attrRng.location != NSNotFound,
            attrRng.length != 0
        {
            let tagStart = string[Range(result.range(at: 1), in: string)!]
            let tagEnd = string[Range(result.range(at: 3), in: string)!]
            return "\(tagStart)\(tagEnd)"
        } else {
            return super.replacementString(for: result, in: string, offset: offset, template: templ)
        }
    }
}
let regex = try! TagCleaningRegex(pattern: openingTagPattern, options: .caseInsensitive)
let output = regex.stringByReplacingMatches(in: inputHTML, range: NSRange(0..



Seems da vamp's answer is far better.

user_2907715 · Answer

If you are looking for a one-liner regex:

let regex = try! NSRegularExpression(pattern: "(?<=<\w{1,40})\s[^>]+(?=>)", options: .caseInsensitive)
let range = NSMakeRange(0, html.count)
let htmlWithoutInlineAttributes = regex.stringByReplacingMatches(in: html, options: [], range: range, withTemplate: "")
print(htmlWithoutInlineAttributes)

Given that html is this:

let html = "Angkor Wat is a temple complex in Cambodia and the largest religious monument in the world, on a site measuring 162.6 hectares (1,626,000 m2; 402 acres). It was originally constructed as a Hindu temple dedicated to the god Vishnu for the Khmer Empire, gradually transforming into a Buddhist temple towards the end of the 12th century. It was built by the Khmer King Suryavarman II in the early 12th century in Yaśodharapura, the capital of the Khmer Empire, as his state temple and eventual mausoleum. Breaking from the Shaiva tradition of previous kings, Angkor Wat was instead dedicated to Vishnu. As the best-preserved temple at the site, it is the only one to have remained a significant religious centre since its foundation. The temple is at the top of the high classical style of Khmer architecture. It has become a symbol of Cambodia, appearing on its national flag, and it is the country\'s prime attraction for visitors.
Angkor Wat combines two basic plans of Khmer temple architecture: the temple-mountain and the later galleried temple. It is designed to represent Mount Meru, home of the devas in Hindu mythology: within a moat and an outer wall 3.6 kilometres (2.2 mi) long are three rectangular galleries, each raised above the next. At the centre of the temple stands a quincunx of towers. Unlike most Angkorian temples, Angkor Wat is oriented to the west; scholars are divided as to the significance of this. The temple is admired for the grandeur and harmony of the architecture, its extensive bas-reliefs, and for the numerous devatas adorning its walls."

Here is the regex explained:

(?<=) : It is postive lookbehind, what is matched is not captured
< : The begining of the opening tag
\w{1,40} : matches any word character, from 1 to 40. 40 is random. This is a workaround since Swift doesn't support variable length lookbehind. If it did, (?<=<\w{1,40}) could have been replaced by (?<=<[a-z]+)
\s : Captures only tags that have a space after the name tag. (No need to match tags that don't have any attributes)
[^>]+ : matches and captures any character but >, but least one (Again, no need to match tags that don't have any attributes). This wouldn't be reliable in real-world unsanitized HTML documents, which could have > all over the place.
(?=>) : Lookahead (but not capturing) for a >

user_8192960 · Answer

first you need to unescape the HTML, then you can try the following regex to clear all the HTML

html2 is your html

   let escapedString = html2.replacingOccurrences(of: " \ "" ", with: "")

let regex = try! NSRegularExpression(pattern: "<[^>]*>", options: .caseInsensitive)
let range = NSMakeRange(0, escapedString.characters.count)
let modString = regex.stringByReplacingMatches(in: escapedString, options: [], range: range, withTemplate: "")
print(modString)

Swift : Regex for remove all inline HTML attributes

4 Answers