javascript - 使用 .getElementsByClassName 将 <string> 标签替换为 <br/> 标签

Question

Fiddle

我有以下由我的计费软件创建的 HTML。问题是我需要在每个 </strong> 之后换行标记，这样文本就不会全部在一行上。我无法在 <p> 之间添加间距CSS 中的标签，因为它生成为一个长字符串。

我只能访问 Javascript

<div class="highlightbox">
    <h2>VPNt</h2>
    <p>As Low as<strong> $8.33/month</strong>
    <strong>Best Plan for Heavy Users</strong>
    Random IP Address-------------------<strong>YES!</strong>
    Ever Changing IP Address-----------<strong>YES!</strong>
    US IP Address--------------------------<strong>YES!</strong>
    Logging the Sites you Visit.--------<strong>NEVER!</strong>
    Super Secure Privacy-----------------<strong>YES!</strong>
    Great for P2P---------------------------<strong>YES!</strong>
    Super High Speed---------------------<strong>YES!</strong>
    Great for Streaming-------------------<strong>YES!</strong>
    US Video Services --------------------<strong>YES!</strong>
    Runs on Windows -------------------<strong>YES!</strong>
    Runs on Mac---------------------------<strong>YES!</strong>
    Runs on IOS --------------------------<strong>YES!</strong>
    No Overage Charges-----------------<strong>YES!</strong>
    Host Servers-----------------------------<strong>No</strong>
    <em>Use our Static IP service for hosting servers</em><br/>
    <strong>Unlimited Bandwidth-------------------YES!</strong>
    </p></div>

我第一次尝试这个

pholder = document.getElementByClassName('highlightbox');
pholder.innerHTML = pholder.innerHTML.replace(/(\<\/strong\>)/g, "$1\<br\>");

但我无法让它工作。

Answer 1

试试这个:

var pholderStrongs = document.querySelectorAll('.highlightbox p strong');

for (var i = 0; i < pholderStrongs.length; ++i)
{
    pholderStrongs[i].insertAdjacentHTML('afterend', '<br />');
}

参见 querySelectorAll