[英]Using JavaScript split to encompass words, punctuation with span but ignore HTML
我知道有些主題幾乎涵蓋了同一主題,但是找不到適合我的主題。
所以我有一些文字,單詞,標點符號和HTML,例如
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper elit efficitur tempus sagittis. Vivamus at eros — quis velit ornare consequat. Vestibulum suscipit erat enim; sed bibendum augue interdum at.</p>
<p>Sed vulputate ipsum id ullamcorper vehicula. Ut ac ornare risus, id vehicula justo. Quisque pretium, lectus "et rutrum fermentum", leo mauris interdum eros, nec blandit nibh dolor nec enim.</p>
我想做的是用一個<span>
元素包含每個單詞和標點符號,而忽略並保持HTML標簽不變。 我需要包含每個標點符號,即使它們彼此相鄰或緊靠一個單詞。
因此輸出將類似於
<p><span>Lorem</span> <span>ipsum</span> <span>sit</span> <span>sit</span> <span>amet</span><span>,</span> (etc...)
到目前為止,我已經設法按空格分隔並用<span>
包含結果,但是HTML標記和標點符號令人頭疼。 :P
提前致謝!
編輯:
這是我到目前為止使用的代碼(如您所見,要拆分的文本在id=textarea
的div
元素中:
$('#textarea').each(function(){
var text = $(this).html().split(" "),
len = text.length,
result = [];
for( var i = 0; i < len; i++ ) {
result[i] = '<span class="clickable">' + text[i] + '</span>';
}
$(this).html(result.join(' '));
});
您正在使用jQuery嗎? 如果是這樣,您可以使用.text()
輕松解決標簽和語法問題。
$("p").each(function(i, p) {
var words = $(p).text()
$(p).html("")
$(words.split(" ")).each(function(j, word) {
var span = $("<span></span>")
span.html(word)
$(p).append(span).append(" ")
});
});
這是對任何html字符串值執行此操作的一般解決方案:
var tagsexpr = "(\\<\\w+\\>)|(\\<\\/\\w+\\>)";
var wordexpr = "[^\\<?\\/|>| ]\\w+";
var puncexpr = "[\\.,\\?\\!]";
function wrap(text) {
var tags = text.match(new RegExp(tagsexpr, 'g'));
var words = text.match(new RegExp(wordexpr + '|' + puncexpr, 'g'));
return tags[0] + words.reduce(function (base, curr, indx) {
return (new RegExp(puncexpr, 'g')).test(words[indx + 1]) ?
base + '<span>' + words[indx] + '</span>' : base + '<span>' + words[indx] + '</span> ';
}, '').trim() + tags[1];
}
console.log(wrap('<p>hello from the matrix.</p>'));
// => "<p><span>hello</span> <span>from</span> <span>the</span> <span>matrix</span><span>.</span></p>"
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.