2012-06-12 191 views
2

我想將html和非html的字符串分隔成兩個字符串。將html分隔成兩個字符串的字符串

我的JavaScript字符串是:

<span>1x</span> Front-line zero tolerance productivity 

我想這可分爲兩個變量

var quantity = "1x"; 
var name = "Front-line zero tolerance productivity"; 
+0

什麼樣的代碼是你試圖解析?有嵌套標籤嗎? – MaxArt

+0

我在解析dom。這個例子是唯一的用例,沒有嵌套。 – ThomasReggi

+0

它將始終是一個單一的嵌套跨度,後跟一個空格? – Sampson

回答

5

拆分。

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" 
+0

對於第一個正確的答案:)由於OP明確提到它是一個字符串。 DEMO >> http://jsfiddle.net/skram/Agfyk/5/ << –

+0

如果跨度不是很好或者有班級怎麼辦?這會失敗嗎? – Marko

+0

@Marko:是的。它會。像其他任何依賴字符串格式的方法一樣。 – user278064

0

由於字符串的格式不會改變,你可以在第一空間分割得到這兩個部分。然後從第一返回元件移除標籤,並且保持所述第二半的結構:

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"] 

小提琴:http://jsfiddle.net/jonathansampson/dBTKZ/

2

假設<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/

3

最簡單的方法是使用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(); 

Example

+0

我喜歡這個答案!索引是關閉的,雖然0 - 1而不是1 - 2 – ThomasReggi

+0

感謝@ThomasReggi檢查演示,索引在0是一個空的文本節點,這實際上是div和跨度之間的空間。 – Marko

0

這可能不是很優雅,但你可以使用JavaScript .replace()功能,爲您的第二個變種,這種如:

$(document).ready(function(){ 
    $('#outp').html('first: ' + $('#inp span').html() + '<br/>' + 
        'second: ' + $('#inp').html().replace($('#inp span').html(),'')); 
}); 
0

這裏是一個更加動態的和模塊化的功能,讓所有的潛臺詞塊你要

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());    
}); 
0
<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> 
相關問題