使用jQuery将特定符号包裹后的文本

我正在做的是将文本封装到div标签内的div中。这不会是一个问题，但我需要包装出现在“ - ”（减号）后面的文本，包括“减号”本身。使用jQuery将特定符号包裹后的文本

这是我的html：

<ul> 
    <li>Some list text - Additional text</li> 
</ul>

当我得到我想要实现这一目标：

<ul> 
    <li>Some list text <span class="after">- Additional text<span></li> 
</ul>

将任何人都可以帮我吗？

预先感谢您。

来源

2009-11-09 Dom

这些“ - ”符号是否意味着是子弹，是“附加文本”是为了描述还是在“某些列表文本”上加以阐述？ – 2009-11-09 15:17:34

如果你喜欢我修改我的答案，包括一些jQuery代码来将ul更改为dl，那么li将dt包装在dd元素中的所有“ - ”分隔文本中，但我强烈建议你考虑你正在尝试在这里显示，并确保它在语义上。对于大多数用户来说，看起来像是一个描述性列表，但使用辅助设备的其他用户将很难找出你想传达的内容。用屏幕阅读器查看你的页面，看看我的意思。 – 2009-11-09 15:30:45

像这样的东西应该这样做。

$('li').each(function() { 
    $(this).html($(this).text().replace(/-.*$/, '<span class="after">$&</span>')); 
});

来源

2009-11-09 15:11:28 htanata

听起来像你在轨道上。使span一个块级元素，像这样：

<span class='after' style='display: block;'>...</span>

，看看有没有做它。

哦，然后移动内嵌样式到您的样式表:)

来源

2009-11-09 14:57:35 rfunduk

这将在每次插入之前断行 - 列表项。

来源

2009-11-09 14:59:28 Marius

它看起来像你试图创建某种类型的描述性列表，而不是一个简单的无序列表。如果你需要保持一个单一的元素里的所有文字我敢肯定有人会发表一个体面的解决办法，但为什么不使用dl而不是ul像这样：

<dl> 
     <dt>Some list text</dt> 
     <dd>- additional text</dd> 
<dl>

这应该达到相同的效果试图在“ - ”符号之后使文本出现在新行中，并且您可以修改<dt>和<dl>元素上的填充和边距，以便它们排成一列，如果这是您要看的样子。如果要使用列表项（<dt>）创建描述性列表并使用描述它们的更多子列表项（<dd>），则更好的方式是暗示在可访问性的语义中，不是使用另一种方法来近似相同的事物。

编辑：在任何人说什么之前，我知道这个问题要求解决方案使用jQuery，并且此解决方案不使用jQuery。但如果这里的意图是近似一个描述性列表，最好在HTML中进行语义编码，而不是使用jQuery魔术。

来源

2009-11-09 15:05:59

下面的东西应该这样做，注意这是在我的浏览器中进行了干编码，因此需要进行测试。

$('ul li').each(function() { 
    var parts = $(this).html().split('-', 1); 

    $(this).html(parts[0]); 
    if (parts.length == 2) { 
     $(this).append(" - " + parts[1]); 
    }  
});

来源

2009-11-09 15:06:25

$.each($("li:contains('-')"),function(i,n){ 
    n.innerHTML = n.innerHTML.replace('-','<span class="after">-')+"</span>" 
});

来源

2009-11-09 15:09:38 Mark

当你删除所有空间并将所有的东西一起塞进一个不可读的混乱时，“单行”是一个误用名词;）我不确定这甚至是正确的，因为它只包含'-'而不是后面的文本。 – DisgruntledGoat 2009-11-09 15:15:00

应该工作。他在连字符前加上，然后在其余内容后加上。 – 2009-11-09 15:18:47

@DisgruntledGoat，你是对的，我不应该把它压缩成一行（多年来编写Perl;）。它确实有效，但。 – Mark 2009-11-09 16:04:08

使用jQuery将特定符号包裹后的文本

回答

相关问题