InDesign script change substring style in textframe - html

Question

I want to build an InDesign script which when you import html tags such as bold and italics, those words are converted to bold or italics.
e.g.
I really like <strong>walking to the park</strong> and eating icecream would be:
I really like walking to the park and eating icecream.
However, In my textframe I can only get a whole paragraph to pick up a style and not individual words or phrases.
In the example below, I would want to apply a bold style to the secondPhrase variable (I have no problem stripping out the tags etc - just want to know how I can apply a style to JUST the secondPhrase
with (myElement) {
// Apply basic text style
applyParagraphStyle(myDoc.paragraphStyles.item("DefaultText"));
var firstPhrase = "I really like";
var secondPhrase = " walking to the park";
var thirdPhrase = " and eating icecream";
contents = firstLine + secondLine + thirdPhrase;
}

Answer 1

Something like the code below should do the trick. The insertionPoint acts just like the cursor in InDesign. If you keep grabbing the last insertionPoint you can change it's style while you are adding text.
var doc = app.documents.add();
var frame = doc.pages[0].textFrames.add({
geometricBounds: [6, 6, 40, 40]
});
var bold = doc.characterStyles.add({ name: "Bold", fontStyle: "Bold" });
var none = doc.characterStyles.itemByName("[None]");
frame.insertionPoints.lastItem().applyCharacterStyle(none);
frame.insertionPoints.lastItem().contents = "I really like";
frame.insertionPoints.lastItem().applyCharacterStyle(bold);
frame.insertionPoints.lastItem().contents = " walking to the park";
frame.insertionPoints.lastItem().applyCharacterStyle(none);
frame.insertionPoints.lastItem().contents = " and eating icecream";

Answer 2

Here's a DRY-er take on Josh's solution -- insertion points are the way to go. If you need to manipulate, mirror, or are working with dynamic JSON content / want to separate out your text, you'll need to run it through a loop, and simply assign your chunks of text as objects. This makes it much easier to swap out text and make use of some things like Array.prototype.reverse(), which I needed to use in my case.
Here's my take on it:
// Basic Setup
var doc = app.documents.add();
var myPage = doc.pages.item(0); // Arbitrary page
// Character-Styles
var bold = doc.characterStyles.add({ name: "Bold", fontStyle: "Bold" });
var none = doc.characterStyles.itemByName("[None]");
// My String as an Array of Objects (Basic JSON format)
var myStringsAndStyles = [
{
contents: "I really like",
characterStyle: none
},
{
contents: " walking to the park ",
characterStyle: bold
},
{
contents: "and eating ice cream.",
characterStyle: none
}
];
// Do stuff
with ( myPage) {
var myTextFrame = textFrames.add({
geometricBounds: [6, 6, 40, 40] // Arbitrary coords
});
with ( myTextFrame.insertionPoints ) {
for ( var i = 0, arrlength = myStringsAndStyles.length; i < arrlength; i++ ) {
lastItem().properties = {
contents: myStringsAndStyles[i].contents,
appliedCharacterStyle: myStringsAndStyles[i].characterStyle
}
}
}
}
Ta da!