Question

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

我只能访问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

Answer 2

考虑使用CSS：

.highlightbox>p {
    white-space:pre; /* or pre-wrap, if preferred */
}

.highlightbox>p {
  white-space: pre;
}

<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>

Answer 3

尝试使用JQuery .append()：

$('strong').append('<br />');

我不认为.innerHTML可以返回其中的每个元素。这只是文字。

JSFiddle Demo

使用.getElementByClassName </strong>将<strong>标记替换为<br/>标签

3 个答案: