Javascript 是否使用Jquery将文本包装为除div之外的任何标记？_Javascript_Jquery_Css_Html

Javascript 是否使用Jquery将文本包装为除div之外的任何标记？

javascript jquery css html

Javascript 是否使用Jquery将文本包装为除div之外的任何标记？,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我对文本有一个问题：除了div children之外，无法包装任何内容。我的问题是： -我使用PHPBB论坛。注释文本没有包装任何容器，我只有纯文本。 -我需要每个段落的文本缩进 -注释文本包括img、strong和许多html标记，包括div（如引号）我想，我想： -将文本与任何html标记一起换行（因为我可以使用内联块缩进），排除div -删除重复的br标记，仅使用一个br标记我提出了两种解决方案，但这些解决方案存在一些问题 HTML代码： <div class="pos

我对文本有一个问题：除了div children之外，无法包装任何内容。我的问题是： -我使用PHPBB论坛。注释文本没有包装任何容器，我只有纯文本。 -我需要每个段落的文本缩进 -注释文本包括img、strong和许多html标记，包括div（如引号）

我想，我想： -将文本与任何html标记一起换行（因为我可以使用内联块缩进），排除div -删除重复的br标记，仅使用一个br标记

我提出了两种解决方案，但这些解决方案存在一些问题

HTML代码：

    <div class="postbody" id="postdiv24216">Itt van a sima szöveg, ami jó hosszú és ezt kellene spanba zárni
    <div class="quotetitle">valaki írta:</div>
    <div class="quotecontent">
        <div class="quotetitle">Másvalaki írta:</div>
        <div class="quotecontent">No <strong>meg ezt</strong> sem...
            <br />
            <!-- m --> <a class="postlink" href="http://m.youtube.com/watch?v=Dp_nePvLZQ0&amp;feature=youtu.be&amp;desktop_uri=%2Fwatch%3Fv%3DDp_nePvLZQ0%26feature%3Dyoutu.be">http://m.youtube.com/watch?v=Dp_nePvLZQ ... 3Dyoutu.be</a>

            <!-- m -->
        </div>
        <br />Ez tök jó! ez idézet</div>
    <br />Ez is tuti! <strong>Ez nem idézet</strong>, ezt is spanolni kell.
    <br />
    <br />
    <br />Lorem Ipsum constituam ad; Illum philosophia accusata id solum vocent 
oportere corrumpit habemus donec minim offendit tritani tempus risus 
sociis maecenas? Usu maiestatis exerci pellentesque exerci! Essent; 
Sea intellegebat suspendisse puto ctas? Oblique? Solum elit mundi libris
aliquet similique dolore sapientem interdum dis elaboraret volutpat 
diam interdum agam docendi primis.
    <br />
Lorem Ipsum expetenda etiam! Voluptua pellentesque cu feugiat intellegat
ignota. Autem saperet percipitur voluptua omnis conceptam epicuri 
eligendi option aliquyam impedit nam scelerisque semper integer postea
homero ultrices curae adipisci soluta pericula quo? Sint! Puto deseruisse
diceret eripuit atqui assentior pulvinar altera posidonium detracto, 
tractatos? Constituam dicat convallis perpetua fastidii</div>

.postbody {
    padding: 5px 15px;
    text-align: justify;
}    
.quotetitle {
        margin: 10px 5px 0 5px;
        padding: 4px;
        border-width: 1px 1px 0 1px;
        border-style: solid;
        border-color: #A9B8C2;
        color: #333333;
        background-color: #A9B8C2;
        font-size: 0.85em;
        font-weight: bold;
    }
    .quotecontent {
        margin: 0 5px 10px 5px;
        padding: 5px;
        border-color: #A9B8C2;
        border-width: 0 1px 1px 1px;
        border-style: solid;
        font-weight: normal;
        font-size: 1em;
        line-height: 1.4em;
        font-family:"Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
        background-color: #FAFAFA;
        color: #4B5C77;
    }
    .firstline {
        text-indent: 1.1em;
        display:inline-block;
    }

JQuery代码（第一个解决方案）：

$（'.postbody'）。每个（函数（）{
var容器=$（此）；
container.contents（）.filter（函数（））{
返回this.nodeType==8；
}).remove（）；
$（“div.quotecontent br”）.remove（）；
if（容器过滤器（“div”、“a”））{
var html=container.html（）.split（“
”）；
container.html（“”）；
for（html中的变量i）
{
if（$.trim（html[i]））
container.append（''+html[i]+“”）；
}
//$（“.firstline>a”）.unwrap（）；
$（“.firstline>div”）.unwrap（）；
}
});

JQuery代码（第二种解决方案）：

$（“.postbody”）
.contents（）
.filter（函数（）{
返回this.nodeType==3；
})
.wrap（函数（）{
return$（“”）.addClass（“firstline”）；
})
.end（）；
$（“span.firstline div”）.unwrap（）；
$（“span.firstline”）.filter（函数（）{
返回$.trim（$（this.html（））==''；
}).remove（）；
$（'.postbody br'）。每个（函数（）{
if（$（this）.next（）是（'br'））{
$（this.next（'br'）.remove（）；
$（this.next（'br'）.remove（）；
}
});

我的第一个解决方案的问题是：拆分所有内容，并修剪我的div。如果div包含任何br标记，则在展开后div容器将出错。我为br标签添加了一个remove to div，但这不是解决方案：( 对于第二个解决方案，我的问题是过滤器节点类型：纯文本将被包装到span、img或strong，或者任何其他html标记将被包装到span之外

我需要这些结果：

    <div class="postbody" id="postdiv24216">
    <p class="gensmall"><span class="firstline">Itt van a sima szöveg, ami jó hosszú és ezt kellene spanba zárni</span></p>
    <div class="quotetitle">valaki írta:</div>
        <div class="quotecontent">
            <div class="quotetitle">Másvalaki írta:</div>
            <div class="quotecontent">No <strong>meg ezt</strong> sem...
                <br />
                <!-- m --> <a class="postlink" href="http://m.youtube.com/watch?v=Dp_nePvLZQ0&amp;feature=youtu.be&amp;desktop_uri=%2Fwatch%3Fv%3DDp_nePvLZQ0%26feature%3Dyoutu.be">http://m.youtube.com/watch?v=Dp_nePvLZQ ... 3Dyoutu.be</a>

                <!-- m -->
            </div>
            <br />Ez tök jó! ez idézet</div>
    <p class="gensmall"><span class="firstline">Ez is tuti! <strong>Ez nem idézet</strong>, ezt is spanolni kell.</span></p>
    <p class="gensmall"><span class="firstline">Lorem Ipsum constituam ad; Illum philosophia accusata id solum vocent 
oportere corrumpit habemus donec minim offendit tritani tempus risus 
sociis maecenas? Usu maiestatis exerci pellentesque exerci! Essent; 
Sea intellegebat suspendisse puto ctas? Oblique? Solum elit mundi libris
aliquet similique dolore sapientem interdum dis elaboraret volutpat 
diam interdum agam docendi primis.</span></p>
<p class="gensmall"><span class="firstline">Lorem Ipsum expetenda etiam! Voluptua pellentesque cu feugiat intellegat
ignota. Autem saperet percipitur voluptua omnis conceptam epicuri 
eligendi option aliquyam impedit nam scelerisque semper integer postea
homero ultrices curae adipisci soluta pericula quo? Sint! Puto deseruisse
diceret eripuit atqui assentior pulvinar altera posidonium detracto, 
tractatos? Constituam dicat convallis perpetua fastidii</span></p>
    </div>


Itt vana sima szöveg，ami jóhosszús ezt kellene spanba zárni
瓦拉基塔：
马斯瓦拉基塔：
否meg eztsem。。。



Ez tök jó！Ez idézet
Ez是图蒂！Ez nem idézet，ezt是斯潘诺尼·凯尔
Lorem Ipsum Constructam ad；Illum Physologia Accusta id solum vocent
这是一个很小的错误
前社会？通常指的是佩伦茨克（Pellentsque）的行为；
海洋智能生物悬液CTA？斜向？溶质elit mundi libris
这是一种相似的方法
中间的直径是多少
Lorem Ipsum expendenda etiam！对知识产权的保护
伊格诺塔·奥特姆·萨佩雷特·佩西皮图尔·沃卢普图亚·奥姆尼斯·埃皮库里
eligendi选项aliquyam妨碍nam scelerisque semper integer postea
奥特里希酒店（homero ultrices curae adipisci Solute a pericula quo？Sint！Puto Desuisse）
这是一个非常重要的问题，
条约？宪法证明了禁食的永久性

难的是：这是一篇文章，我在一个页面上有更多的文章。我现在使用第一种解决方案，但不是更好的

如何在div.postbody中除去任何div，但在其他文本上换行并缩进第一行？

您可以对整个

.postbody

应用左填充，然后使用负边距将引号向左移动。这将为您提供一个纯CSS解决方案

有关的更改如下：

.quotetitle {
    margin: 10px 5px 0 -20px;
}
.quotecontent {
    margin: 0 5px 10px -20px;
}
.quotecontent .quotecontent,
.quotecontent .quotetitle {
    margin-left: 5px;
}
.postbody {
    padding-left: 20px;
}

在本例中，我应用了20px的填充/边距

仅在铬中测试

我不熟悉phpbb，所以我不能保证此解决方案不会干扰您更广泛的布局，但稍加调整，它应该是可靠的。

抱歉，但您的问题很难理解。我甚至看不出问题是什么。当您从JSFIDLE中删除所有Javascript时，问题应该是可见的，对吗？是的，如果不使用任何javascript代码，则获取原始代码。：-）PHBB不使用p标记或任何块/html代码作为文本，但我需要每个段落的文本缩进。我需要将所有未包装的文本放入一个块（如p或span），并用css格式化。谢谢，这是一个很好的解决方案，但对我来说不是-（因为我需要一个书的效果：。postbody文本是justify，但每个段落的第一行都是文本缩进。下面是更新的链接，以获得更好的示例：

    <div class="postbody" id="postdiv24216">
    <p class="gensmall"><span class="firstline">Itt van a sima szöveg, ami jó hosszú és ezt kellene spanba zárni</span></p>
    <div class="quotetitle">valaki írta:</div>
        <div class="quotecontent">
            <div class="quotetitle">Másvalaki írta:</div>
            <div class="quotecontent">No <strong>meg ezt</strong> sem...
                <br />
                <!-- m --> <a class="postlink" href="http://m.youtube.com/watch?v=Dp_nePvLZQ0&amp;feature=youtu.be&amp;desktop_uri=%2Fwatch%3Fv%3DDp_nePvLZQ0%26feature%3Dyoutu.be">http://m.youtube.com/watch?v=Dp_nePvLZQ ... 3Dyoutu.be</a>

                <!-- m -->
            </div>
            <br />Ez tök jó! ez idézet</div>
    <p class="gensmall"><span class="firstline">Ez is tuti! <strong>Ez nem idézet</strong>, ezt is spanolni kell.</span></p>
    <p class="gensmall"><span class="firstline">Lorem Ipsum constituam ad; Illum philosophia accusata id solum vocent 
oportere corrumpit habemus donec minim offendit tritani tempus risus 
sociis maecenas? Usu maiestatis exerci pellentesque exerci! Essent; 
Sea intellegebat suspendisse puto ctas? Oblique? Solum elit mundi libris
aliquet similique dolore sapientem interdum dis elaboraret volutpat 
diam interdum agam docendi primis.</span></p>
<p class="gensmall"><span class="firstline">Lorem Ipsum expetenda etiam! Voluptua pellentesque cu feugiat intellegat
ignota. Autem saperet percipitur voluptua omnis conceptam epicuri 
eligendi option aliquyam impedit nam scelerisque semper integer postea
homero ultrices curae adipisci soluta pericula quo? Sint! Puto deseruisse
diceret eripuit atqui assentior pulvinar altera posidonium detracto, 
tractatos? Constituam dicat convallis perpetua fastidii</span></p>
    </div>

.quotetitle {
    margin: 10px 5px 0 -20px;
}
.quotecontent {
    margin: 0 5px 10px -20px;
}
.quotecontent .quotecontent,
.quotecontent .quotetitle {
    margin-left: 5px;
}
.postbody {
    padding-left: 20px;
}