我想找到列表标签(<li>, <ol>, <ul>)等的结束标记，以便单独显示它们。我不知道如何解析javascript中的html来做到这一点。
例如，这是输入html字符串：
<h2>Actions</h2>
<ol>
<li>
<p><span style="font-size: 12pt; font-family: arial,helvetica,sans-serif;"><strong>Find the Subscriber</strong></span></p>
<ol style="list-style-type: decimal;">
<li>Sign in to RMS and click the <strong>Customer Search</strong> link.</li>
<li>Enter the customer’s phone number in the <strong>PTN</strong> field and click <strong>Search</strong>.</li>
<li>Authenticate the customer per standard procedures. Refer to <span style="color: #303030;"><a class="jive-link-wiki-small" data-containerid="2714" data-containertype="14" data-objectid="4592" data-objecttype="102" href="https://iconnect.sprint.com/docs/DOC-4592">Customer Authentication <span style="line-height: 107%; font-family: 'Calibri',sans-serif; font-size: 11pt; mso-ascii-theme-font: minor-latin; mso-hansi-theme-font: minor-latin; mso-bidi-font-family: 'Times New Roman'; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-ansi-language: EN-US; mso-fareast-theme-font: minor-latin; mso-fareast-language: EN-US; mso-bidi-language: AR-SA;">–</span> Setting up Security Access Information</a></span> for steps.</li>
<li>Navigate to the <strong>Services</strong> tab and click the <strong>Subscriber #</strong> link to open the <strong>Subscriber Information </strong>screen.</li>
<li>On the <strong>Subscription Information </strong>screen, click <strong>Contract/Agreement Details</strong>.</li>
<li>Verify that the correct PTN displays in the lower section of the screen with the <strong>Loan/Lease Details</strong>.</li>
</ol>
</li>
</li>
<li>
<p><span style="font-size: 12pt; font-family: arial,helvetica,sans-serif;"><strong>Terminate the Lease</strong></span></p>
<ol style="list-style-type: decimal;">
<li>
Click <strong>Terminate Lease</strong>.
<ul>
<li>
The <strong>Lease Termination</strong> screen will display the current, active ESN in the<strong> Incoming Device</strong> field.
<ul>
<li>If the customer doesn't have their original device but wants to turn in a device of equal or greater value to complete the transaction, check to make sure that device is, in fact, worth equal or greater value: Confirm the value by replacing the ESN in the <strong>Incoming Device</strong> field with the ESN of the device the customer wants to turn in.</li>
</ul>
</li>
</ul>
</li>
<li>
<strong>Review the two options with the customer:</strong><span style="font-family: Calibri;"> T</span>urn in the device or purchase it:
<ol style="list-style-type: upper-alpha;">
<li>
<strong>Turn in the device:</strong>
<ol style="list-style-type: decimal;">
<li>Tell the customer the required payment and taxes that they'll owe.</li>
<li>Inspect the device for damage.</li>
<li>
All turn-in devices must power on with no damage to the device. If it's an Apple device, make sure the Activation Lock is disabled. If the device is damaged, the customer can still turn in the device, but they'll be charged a <strong>Damaged Device Fee (DDF).</strong>
<ul style="list-style-type: circle;">
<li><strong>Note:</strong> Damage to the device is defined as anything broken, cracked and missing (LCD, hinge, keypad, buttons, housing, battery door).</li>
</ul>
</li>
<li>
If the turn-in device doesn’t power on or is damaged, tell the customer their options:
<ul>
<li>If applicable, file an insurance claim or have the device repaired in-store. Deductibles and/or S&R fees may apply.</li>
<li>Pay the associated DDF as displayed in RMS and turn in the device.</li>
<li>Choose the Purchase option: Pay off the remaining balance on the current lease to become eligible for an upgrade without a turn-in.</li>
</ul>
</li>
<li>
If the turn-in device meets the criteria above, select the appropriate answers next to the questions in the drop-down list:
<ul>
<li>Does the device power on and off?</li>
<li>Is anything broken, cracked, missing (LCD, hinge, keypad, buttons, housing, battery door)?</li>
<li><strong>Note:</strong> The <strong>Continue</strong> button won't be enabled until you select the answers.</li>
</ul>
</li>
<li>Click <strong>Turn-In</strong> and then click <strong>Continue</strong>.</li>
</ol>
</li>
<li>
<strong>Purchase it:</strong>
<ol style="list-style-type: decimal;">
<li>Tell the customer the required payment and taxes that they'll owe.</li>
<li>
RMS will display the correct amount for the <strong>Fair Market Value (FMV)</strong> of the device.
<ul>
<li>
<strong>REACTIVE BASIS ONLY: </strong>If the customer mentions that their bill suggested they could find the FMV of their device by going to sprint.com/buyback and the amounts differ:
<ol>
<li>Complete the transaction in RMS per standard procedures.</li>
<li>Issue a credit if the amount on sprint.com/buyback indicates that the FMV is lower than what is being displayed in RMS.</li>
<li>If the sprint.com/buyback amount is <strong>greater than</strong> the RMS amount, charge the customer the RMS amount.</li>
</ol>
</li>
</ul>
</li>
<li>If the customer has a Sprint Flex lease (lease began after July 14, 2017), the customer will have an additional option to spread the device amount over a 6-month payment plan (Monthly Installment Billing agreement).</li>
<li>Click <strong>Purchase</strong> and then <strong>Continue</strong>.</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
<p style="min-height: 8pt; padding: 0px;"> </p>
</li>
<li>
<p><span style="font-size: 12pt; font-family: arial,helvetica,sans-serif;"><strong>Tender the Transaction</strong></span></p>
<p>On the <strong>Payment Method</strong> dialog box, select the payment method.</p>
<ul>
<li><span style="font-family: arial,helvetica,sans-serif;">For further instructions, see <a class="jive-link-wiki-small" data-containerid="2456" data-containertype="14" data-objectid="15483" data-objecttype="102" href="https://iconnect.sprint.com/docs/DOC-15483">Accepting Tender Types</a></span></li>
</ul>
</li>
<p style="min-height: 8pt; padding: 0px;"> </p>
</li>
</ol></body></html>
我希望能够将它分成3个不同的字符串，如：First String：
<li>
<p><span style="font-size: 12pt; font-family: arial,helvetica,sans-serif;"><strong>Find the Subscriber</strong></span></p>
<ol style="list-style-type: decimal;">
<li>Sign in to RMS and click the <strong>Customer Search</strong> link.</li>
<li>Enter the customer’s phone number in the <strong>PTN</strong> field and click <strong>Search</strong>.</li>
<li>Authenticate the customer per standard procedures. Refer to <span style="color: #303030;"><a class="jive-link-wiki-small" data-containerid="2714" data-containertype="14" data-objectid="4592" data-objecttype="102" href="https://iconnect.sprint.com/docs/DOC-4592">Customer Authentication <span style="line-height: 107%; font-family: 'Calibri',sans-serif; font-size: 11pt; mso-ascii-theme-font: minor-latin; mso-hansi-theme-font: minor-latin; mso-bidi-font-family: 'Times New Roman'; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-ansi-language: EN-US; mso-fareast-theme-font: minor-latin; mso-fareast-language: EN-US; mso-bidi-language: AR-SA;">–</span> Setting up Security Access Information</a></span> for steps.</li>
<li>Navigate to the <strong>Services</strong> tab and click the <strong>Subscriber #</strong> link to open the <strong>Subscriber Information </strong>screen.</li>
<li>On the <strong>Subscription Information </strong>screen, click <strong>Contract/Agreement Details</strong>.</li>
<li>Verify that the correct PTN displays in the lower section of the screen with the <strong>Loan/Lease Details</strong>.</li>
</ol>
</li>
然后第二个字符串：
<li>
<p><span style="font-size: 12pt; font-family: arial,helvetica,sans-serif;"><strong>Terminate the Lease</strong></span></p>
<ol style="list-style-type: decimal;">
<li>
Click <strong>Terminate Lease</strong>.
<ul>
<li>
The <strong>Lease Termination</strong> screen will display the current, active ESN in the<strong> Incoming Device</strong> field.
<ul>
<li>If the customer doesn't have their original device but wants to turn in a device of equal or greater value to complete the transaction, check to make sure that device is, in fact, worth equal or greater value: Confirm the value by replacing the ESN in the <strong>Incoming Device</strong> field with the ESN of the device the customer wants to turn in.</li>
</ul>
</li>
</ul>
</li>
<li>
<strong>Review the two options with the customer:</strong><span style="font-family: Calibri;"> T</span>urn in the device or purchase it:
<ol style="list-style-type: upper-alpha;">
<li>
<strong>Turn in the device:</strong>
<ol style="list-style-type: decimal;">
<li>Tell the customer the required payment and taxes that they'll owe.</li>
<li>Inspect the device for damage.</li>
<li>
All turn-in devices must power on with no damage to the device. If it's an Apple device, make sure the Activation Lock is disabled. If the device is damaged, the customer can still turn in the device, but they'll be charged a <strong>Damaged Device Fee (DDF).</strong>
<ul style="list-style-type: circle;">
<li><strong>Note:</strong> Damage to the device is defined as anything broken, cracked and missing (LCD, hinge, keypad, buttons, housing, battery door).</li>
</ul>
</li>
<li>
If the turn-in device doesn’t power on or is damaged, tell the customer their options:
<ul>
<li>If applicable, file an insurance claim or have the device repaired in-store. Deductibles and/or S&R fees may apply.</li>
<li>Pay the associated DDF as displayed in RMS and turn in the device.</li>
<li>Choose the Purchase option: Pay off the remaining balance on the current lease to become eligible for an upgrade without a turn-in.</li>
</ul>
</li>
<li>
If the turn-in device meets the criteria above, select the appropriate answers next to the questions in the drop-down list:
<ul>
<li>Does the device power on and off?</li>
<li>Is anything broken, cracked, missing (LCD, hinge, keypad, buttons, housing, battery door)?</li>
<li><strong>Note:</strong> The <strong>Continue</strong> button won't be enabled until you select the answers.</li>
</ul>
</li>
<li>Click <strong>Turn-In</strong> and then click <strong>Continue</strong>.</li>
</ol>
</li>
<li>
<strong>Purchase it:</strong>
<ol style="list-style-type: decimal;">
<li>Tell the customer the required payment and taxes that they'll owe.</li>
<li>
RMS will display the correct amount for the <strong>Fair Market Value (FMV)</strong> of the device.
<ul>
<li>
<strong>REACTIVE BASIS ONLY: </strong>If the customer mentions that their bill suggested they could find the FMV of their device by going to sprint.com/buyback and the amounts differ:
<ol>
<li>Complete the transaction in RMS per standard procedures.</li>
<li>Issue a credit if the amount on sprint.com/buyback indicates that the FMV is lower than what is being displayed in RMS.</li>
<li>If the sprint.com/buyback amount is <strong>greater than</strong> the RMS amount, charge the customer the RMS amount.</li>
</ol>
</li>
</ul>
</li>
<li>If the customer has a Sprint Flex lease (lease began after July 14, 2017), the customer will have an additional option to spread the device amount over a 6-month payment plan (Monthly Installment Billing agreement).</li>
<li>Click <strong>Purchase</strong> and then <strong>Continue</strong>.</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
第三串：
<li>
<p><span style="font-size: 12pt; font-family: arial,helvetica,sans-serif;"><strong>Tender the Transaction</strong></span></p>
<p>On the <strong>Payment Method</strong> dialog box, select the payment method.</p>
<ul>
<li><span style="font-family: arial,helvetica,sans-serif;">For further instructions, see <a class="jive-link-wiki-small" data-containerid="2456" data-containertype="14" data-objectid="15483" data-objecttype="102" href="https://iconnect.sprint.com/docs/DOC-15483">Accepting Tender Types</a></span></li>
</ul>
</li>
关于如何做到这一点的任何指示？
我能够检测到每个li，：
var actionString = fileContent.match(/\<h2\>Actions<\/h2>(.*?)\<\/body\>/gi);
// console.log(actionString);
var olArray = actionString[0].match(/\<li\>(.*?)\<\/li\>/gi);
但是我希望显示3个单独的li's，因此需要找到外部li的结束标记。
答案 0 :(得分：1)
您可以使用DOMParser从文本中创建可遍历的文档，然后选择每个li作为外部ul的子项：
function parseHtmlStr() {
const doc = new DOMParser().parseFromString(htmlStr, 'text/html');
const lis = doc.querySelectorAll('body > ol > li');
lis.forEach(li => console.log(li.outerHTML));
console.log(lis.length);
}
const htmlStr = `<h2>Actions</h2>
<ol>
<li>
<p><span style="font-size: 12pt; font-family: arial,helvetica,sans-serif;"><strong>Find the Subscriber</strong></span></p>
<ol style="list-style-type: decimal;">
<li>Sign in to RMS and click the <strong>Customer Search</strong> link.</li>
<li>Enter the customer’s phone number in the <strong>PTN</strong> field and click <strong>Search</strong>.</li>
<li>Authenticate the customer per standard procedures. Refer to <span style="color: #303030;"><a class="jive-link-wiki-small" data-containerid="2714" data-containertype="14" data-objectid="4592" data-objecttype="102" href="https://iconnect.sprint.com/docs/DOC-4592">Customer Authentication <span style="line-height: 107%; font-family: 'Calibri',sans-serif; font-size: 11pt; mso-ascii-theme-font: minor-latin; mso-hansi-theme-font: minor-latin; mso-bidi-font-family: 'Times New Roman'; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-ansi-language: EN-US; mso-fareast-theme-font: minor-latin; mso-fareast-language: EN-US; mso-bidi-language: AR-SA;">–</span> Setting up Security Access Information</a></span> for steps.</li>
<li>Navigate to the <strong>Services</strong> tab and click the <strong>Subscriber #</strong> link to open the <strong>Subscriber Information </strong>screen.</li>
<li>On the <strong>Subscription Information </strong>screen, click <strong>Contract/Agreement Details</strong>.</li>
<li>Verify that the correct PTN displays in the lower section of the screen with the <strong>Loan/Lease Details</strong>.</li>
</ol>
</li>
</li>
<li>
<p><span style="font-size: 12pt; font-family: arial,helvetica,sans-serif;"><strong>Terminate the Lease</strong></span></p>
<ol style="list-style-type: decimal;">
<li>
Click <strong>Terminate Lease</strong>.
<ul>
<li>
The <strong>Lease Termination</strong> screen will display the current, active ESN in the<strong> Incoming Device</strong> field.
<ul>
<li>If the customer doesn't have their original device but wants to turn in a device of equal or greater value to complete the transaction, check to make sure that device is, in fact, worth equal or greater value: Confirm the value by replacing the ESN in the <strong>Incoming Device</strong> field with the ESN of the device the customer wants to turn in.</li>
</ul>
</li>
</ul>
</li>
<li>
<strong>Review the two options with the customer:</strong><span style="font-family: Calibri;"> T</span>urn in the device or purchase it:
<ol style="list-style-type: upper-alpha;">
<li>
<strong>Turn in the device:</strong>
<ol style="list-style-type: decimal;">
<li>Tell the customer the required payment and taxes that they'll owe.</li>
<li>Inspect the device for damage.</li>
<li>
All turn-in devices must power on with no damage to the device. If it's an Apple device, make sure the Activation Lock is disabled. If the device is damaged, the customer can still turn in the device, but they'll be charged a <strong>Damaged Device Fee (DDF).</strong>
<ul style="list-style-type: circle;">
<li><strong>Note:</strong> Damage to the device is defined as anything broken, cracked and missing (LCD, hinge, keypad, buttons, housing, battery door).</li>
</ul>
</li>
<li>
If the turn-in device doesn’t power on or is damaged, tell the customer their options:
<ul>
<li>If applicable, file an insurance claim or have the device repaired in-store. Deductibles and/or S&R fees may apply.</li>
<li>Pay the associated DDF as displayed in RMS and turn in the device.</li>
<li>Choose the Purchase option: Pay off the remaining balance on the current lease to become eligible for an upgrade without a turn-in.</li>
</ul>
</li>
<li>
If the turn-in device meets the criteria above, select the appropriate answers next to the questions in the drop-down list:
<ul>
<li>Does the device power on and off?</li>
<li>Is anything broken, cracked, missing (LCD, hinge, keypad, buttons, housing, battery door)?</li>
<li><strong>Note:</strong> The <strong>Continue</strong> button won't be enabled until you select the answers.</li>
</ul>
</li>
<li>Click <strong>Turn-In</strong> and then click <strong>Continue</strong>.</li>
</ol>
</li>
<li>
<strong>Purchase it:</strong>
<ol style="list-style-type: decimal;">
<li>Tell the customer the required payment and taxes that they'll owe.</li>
<li>
RMS will display the correct amount for the <strong>Fair Market Value (FMV)</strong> of the device.
<ul>
<li>
<strong>REACTIVE BASIS ONLY: </strong>If the customer mentions that their bill suggested they could find the FMV of their device by going to sprint.com/buyback and the amounts differ:
<ol>
<li>Complete the transaction in RMS per standard procedures.</li>
<li>Issue a credit if the amount on sprint.com/buyback indicates that the FMV is lower than what is being displayed in RMS.</li>
<li>If the sprint.com/buyback amount is <strong>greater than</strong> the RMS amount, charge the customer the RMS amount.</li>
</ol>
</li>
</ul>
</li>
<li>If the customer has a Sprint Flex lease (lease began after July 14, 2017), the customer will have an additional option to spread the device amount over a 6-month payment plan (Monthly Installment Billing agreement).</li>
<li>Click <strong>Purchase</strong> and then <strong>Continue</strong>.</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
<p style="min-height: 8pt; padding: 0px;"> </p>
</li>
<li>
<p><span style="font-size: 12pt; font-family: arial,helvetica,sans-serif;"><strong>Tender the Transaction</strong></span></p>
<p>On the <strong>Payment Method</strong> dialog box, select the payment method.</p>
<ul>
<li><span style="font-family: arial,helvetica,sans-serif;">For further instructions, see <a class="jive-link-wiki-small" data-containerid="2456" data-containertype="14" data-objectid="15483" data-objecttype="102" href="https://iconnect.sprint.com/docs/DOC-15483">Accepting Tender Types</a></span></li>
</ul>
</li>
<p style="min-height: 8pt; padding: 0px;"> </p>
</li>
</ol>`;
parseHtmlStr();