我想將html和非html的字符串分隔成兩個字符串。將html分隔成兩個字符串的字符串
我的JavaScript字符串是:
<span>1x</span> Front-line zero tolerance productivity
我想這可分爲兩個變量
var quantity = "1x";
var name = "Front-line zero tolerance productivity";
我想將html和非html的字符串分隔成兩個字符串。將html分隔成兩個字符串的字符串
我的JavaScript字符串是:
<span>1x</span> Front-line zero tolerance productivity
我想這可分爲兩個變量
var quantity = "1x";
var name = "Front-line zero tolerance productivity";
拆分。
string = "<span>1x</span> Front-line zero tolerance productivity"
tokens = string.split(/<\/?span>/); // returns ["", "1x", " Front-line zero tolerance productivity"]
var quantity = tokens[1] // "1x"
var name = tokens[2]; // "Front-line zero tolerance productivity"
對於第一個正確的答案:)由於OP明確提到它是一個字符串。 DEMO >> http://jsfiddle.net/skram/Agfyk/5/ << –
如果跨度不是很好或者有班級怎麼辦?這會失敗嗎? – Marko
@Marko:是的。它會。像其他任何依賴字符串格式的方法一樣。 – user278064
由於字符串的格式不會改變,你可以在第一空間分割得到這兩個部分。然後從第一返回元件移除標籤,並且保持所述第二半的結構:
var str = "<span>1x</span> Front-line zero tolerance productivity";
var ndx = str.indexOf(" ");
var rst = []; // Array of results
rst.push(str.substr(0,ndx).replace(/<\/?.+?>/g,""));
rst.push(str.substr(ndx+1));
這導致以下數組中:
["1x", "Front-line zero tolerance productivity"]
假設<span>1x</span> Front-line zero tolerance productivity
被包裹在像下面的div裏面,
<div id="test">
<span>1x</span> Front-line zero tolerance productivity
</div>
JS:
var $clonedTest = $('#test').clone();
var $span = $clonedTest.find('span');
var quality = $span.text();
$span.remove();
var name = $.trim($clonedTest.text());
DEMO:當<span>
或</span>
標籤被發現http://jsfiddle.net/skram/Agfyk/2/
最簡單的方法是使用jQuerys contents()
,因爲你總是會有這種類型的標記。
HTML
<div id="split-me">
<span>1x</span> Front-line zero tolerance productivity
</div>
jQuery的
var $contents = $("#split-me").contents();
var quantity = $contents.eq(1).text();
var name = $contents.eq(2).text();
我喜歡這個答案!索引是關閉的,雖然0 - 1而不是1 - 2 – ThomasReggi
感謝@ThomasReggi檢查演示,索引在0是一個空的文本節點,這實際上是div和跨度之間的空間。 – Marko
這可能不是很優雅,但你可以使用JavaScript .replace()
功能,爲您的第二個變種,這種如:
$(document).ready(function(){
$('#outp').html('first: ' + $('#inp span').html() + '<br/>' +
'second: ' + $('#inp').html().replace($('#inp span').html(),''));
});
這裏是一個更加動態的和模塊化的功能,讓所有的潛臺詞塊你要
jQuery.fn.extend({
texts: function() {
var texts = [];
var blocks = this.contents();
$.each(blocks, function(i, block) {
if(block.nodeName === '#text') {
var data = $.trim(block.data);
data && texts.push(data);
} else {
texts = jQuery.merge(texts, $(block).texts());
}
});
return texts;
}
});
$(function() {
console.debug($('<span><span>1x</span> Front-line zero tolerance productivity</span>').texts());
});
<div class="container">
<span>1x</span> Front-line zero tolerance productivity
</div>
<script type="text/javascript">
var matches = $('.container').html().match(/<span>(.*)<\/span> ?(.*)/);
var spanText = matches[1]; // 1x
var textNode = matches[2]; // Front-line zero tolerance productivity
</script>
什麼樣的代碼是你試圖解析?有嵌套標籤嗎? – MaxArt
我在解析dom。這個例子是唯一的用例,沒有嵌套。 – ThomasReggi
它將始終是一個單一的嵌套跨度,後跟一個空格? – Sampson