使用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將特定符號包裹後的文本

回答

相關問題