I have the following text returned from an API in a single line:
1. Choose a target. Pick a target within your attack's range: a creature, an object, or a location. 2. Determine modifiers. The GM determines whether the target has cover and whether you have advantage or disadvantage against the target. In addition, spells, special abilities, and other effects can apply penalties or bonuses to your attack roll. 3. Resolve the attack. You make the attack roll. On a hit, you roll damage, unless the particular attack has rules that specify otherwise. Some attacks cause special effects in addition to or instead of damage.
What I am looking for is to make an ordered list based on this text separated by the digits. I have this code trying to make this work:
html = html.replace(/\d\.([\s\w]+)/g, "<li>$1</li>");
But it gives me this as a result:
•
Choose a target. Pick a target within your attack's range: a creature, an object, or a location.
•
Determine modifiers. The GM determines whether the target has cover and whether you have advantage or disadvantage against the target. In addition, spells, special abilities, and other effects can apply penalties or bonuses to your attack roll.
•
Resolve the attack. You make the attack roll. On a hit, you roll damage, unless the particular attack has rules that specify otherwise. Some attacks cause special effects in addition to or instead of damage.
What I am trying to come as a result would be:
- Choose a target. Pick a target within your attack's range: a creature, an object, or a location.
- Determine modifiers. The GM determines whether the target has cover and whether you have advantage or disadvantage against the target. In addition, spells, special abilities, and other effects can apply penalties or bonuses to your attack roll.
- Resolve the attack. You make the attack roll. On a hit, you roll damage, unless the particular attack has rules that specify otherwise. Some attacks cause special effects in addition to or instead of damage.
Can someone please help me telling what I am doing wrong and a possible solution to make this work? Thank you very much for the help.
You can use the fact that <li> elements don't need to be closed explicitly in HTML, and then it is as simple as replacing every number with <li>.
Also make sure that the parent element is an <ol> element ("ordered list"), so you get the numbering instead of the bullets:
let html = "1. Choose a target. Pick a target within your attack's range: a creature, an object, or a location. 2. Determine modifiers. The GM determines whether the target has cover and whether you have advantage or disadvantage against the target. In addition, spells, special abilities, and other effects can apply penalties or bonuses to your attack roll. 3. Resolve the attack. You make the attack roll. On a hit, you roll damage, unless the particular attack has rules that specify otherwise. Some attacks cause special effects in addition to or instead of damage.";
html = html.replace(/\s*\d+\.\s*/g, "<li>");
document.querySelector("ol").innerHTML = html;<ol></ol>