отдельная строка с html на две строки

Question

Я пытаюсь отделить строку с html и non-html в ней в две строки.

Моя Javascript строка:

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

Я хочу, чтобы разделить на две переменные

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

Answer 1

Split когда <span> или </span> тег найден.

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" 

Answer 2

Поскольку формат строки не изменится, вы можете разделить на первом пространстве чтобы получить две части. Затем удалить тег из первого возвращаемого элемента, и сохранить структуру второй половины:

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

Fiddle: http://jsfiddle.net/jonathansampson/dBTKZ/

Answer 3

Если предположить, что <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:http://jsfiddle.net/skram/Agfyk/2/

Answer 4

простым способом было бы использовать 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

Answer 5

Это может быть не очень элегантно, но вы можете использовать яваскрипт .replace() функции для вашего второго вара, такого as:

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

Answer 6

Вот более динамичная и модулярная функция, чтобы получить все подтексты блоки, которые вы хотите

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());    
}); 

Answer 7

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