Question

我正在尝试将带有html和非html的字符串分成两个字符串。

我的javascript字符串是：

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

我希望将其分为两个变量

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

Answer 1

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

最简单的方法是使用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 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

由于字符串的格式不会改变，您可以在第一个空格上拆分以获得这两个部分。然后从第一个返回的元素中删除标记，并保留下半部分的结构：

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/

Answer 5

这可能不是很优雅，但您可以将javascript .replace()函数用于第二个var，例如：

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

将带有html的字符串分成两个字符串

7 个答案: