Parse string with HTML tag and transform to Text

[aarsland]

I have a string:

let input = "Some text with <strong>an important part</strong>, then regular text." +
            " <strong>finally more important stuff</strong> - perhaps more regular stuff."

This should be transformed into SwiftUI Text elements:

Text("Some text with ") + Text("an important part").bold() + Text(", then regular text. ") + 
    Text("finally more important stuff").bold() + Text(" - perhaps more regular stuff")

Is this a fit task for this parsing library? I have tried a little but not been able to find a solution yet.

[mbrandonw]

Yes, this is possible with the parsing library. You can parse directly into SwiftUI's Text, but it's easier to first parse into an intermediate type that is easier to handle (and equatable so that it's easier to test), and then map the intermediate type into Text.

The intermediate type could be as simple as this:

enum Result: Equatable {
  case text(String)
  case strong(String)
}

If you wanted to support more tags you would add onto this enum. Then you have to just describe how to parse from the beginning of an input string to generate values in Result. For example, to parse .text you just need to take everything up until you either reach a <strong> tag or until you reach the end of the input:

let text = PrefixUpTo("<strong>".utf8)
  .orElse(Rest())
  .compactMap {
    $0.isEmpty
      ? nil
      : Result.text(String(Substring($0)))
  }

Similarly, to parse .strong we need to first be able to parse <strong> from the beginning of the input, and then parse everything up until (but not including) </strong>, and then finally parse and discard the closing </strong>:

let strong = StartsWith("<strong>".utf8)
  .take(PrefixUpTo("</strong>".utf8))
  .skip(StartsWith("</strong>".utf8))
  .compactMap {
    $0.isEmpty
      ? nil
      : Result.strong(String(Substring($0)))
  }

And finally you can parse a bunch of text and strong tags by using the Many combinator:

let results = Many(text.orElse(strong))

Using this with your input string makes the following test pass:

let input: Substring = """
    Some text with <strong>an important part</strong>, then regular text. \
    <strong>finally more important stuff</strong> - perhaps more regular stuff.
    """
XCTAssertEqual(
  results.parse(input),
  [
    .text("Some text with "),
    .strong("an important part"),
    .text(", then regular text. "),
    .strong("finally more important stuff"),
    .text(" - perhaps more regular stuff."),
  ]
)

I leave it as an exercise for you to write a function that will transform [Result] into Text.

[mbrandonw]

Hi @aarsland, you can update to the new parser builder syntax like so:

let strong = Parse {
  "<strong>".utf8
  PrefixUpTo("</strong>".utf8)
  "</strong>".utf8
}
.compactMap {
  $0.isEmpty
    ? nil
    : Result.strong(String(Substring($0)))
}

[aarsland]

Thank you for your help, @mbrandonw ! That is a pretty nice syntax. I have made a passing test with the new implementation:

    func testParseRichTextStrong() throws {
        let strong = Parse {
            "<strong>"
            PrefixUpTo("</strong>")
                .compactMap {
                    $0.isEmpty ? nil
                    : String.RichText.strong(String(Substring($0)))
                }
            "</strong>"
        }
        
        let text = PrefixUpTo("<strong>")
            .compactMap {
                $0.isEmpty ? nil
                : String.RichText.text(String(Substring($0)))
            }
        
        let parser =
        Many {
            OneOf {
                text
                strong
                Rest().compactMap {
                    $0.isEmpty ? nil
                    : String.RichText.text(String($0))
                }
            }
        }
        
        let input: Substring = """
            Some text with <strong>an important part</strong>, then regular text. \
            <strong>finally more important stuff</strong> - perhaps more regular stuff.
            """
        XCTAssertEqual(
            try parser.parse(input),
            [
                .text("Some text with "),
                .strong("an important part"),
                .text(", then regular text. "),
                .strong("finally more important stuff"),
                .text(" - perhaps more regular stuff."),
            ]
        )
    }
    

[mbrandonw]

Awesome, looks great @aarsland !

[acosmicflamingo]

@mbrandonw pretty cool stuff! Hm, is there a lot that would change if we were to support more than two cases in the RichText enum? I'm trying to figure out how to add italic support to this code but the italics case is being ignored:

let boldText = Parse {
  "<b>"
  PrefixUpTo("</b>")
    .compactMap {
      $0.isEmpty
      ? nil
      : String.RichText.bold(String(Substring($0)))
    }
  "</b>"
}

let italicText = Parse {
  "<i>"
  PrefixUpTo("</i>")
    .compactMap {
      $0.isEmpty
      ? nil
      : String.RichText.italic(String(Substring($0)))
    }
  "</i>"
}

let regularText = OneOf {
  PrefixUpTo("<b>")
    .compactMap {
      $0.isEmpty
      ? nil
      : String.RichText.regular(String(Substring($0)))
    }
  
  PrefixUpTo("<i>")
    .compactMap {
      $0.isEmpty
      ? nil
      : String.RichText.regular(String(Substring($0)))
    }
}

let parser =
Many {
  OneOf {
    boldText
    italicText
    regularText
    Rest().compactMap {
      $0.isEmpty
      ? nil
      : String.RichText.regular(String($0))
    }
  }
}

Even if we can figure out how to get this to work, I can't fathom how we can cleanly handle combining <b>, <i>, </b>, and </i> since there are so many different ways you can move them around :( is that why swift-parsing doesn't have an HTML parser?

[acosmicflamingo]

@aarsland not totally related to parsing but just that if you want to support italics in addition to making your text bold, you might want to utilize AttributeString's ability handle Markdown (Kabir from the Slack channel introduced me to it). From my initial testing, it seems like it's exactly what I need. Maybe it'll be useful for you too :)