2

htmlと非htmlを含む文字列を2つの文字列に分割しようとしています。

私のJavaScript文字列は次のとおりです。

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

これを2つの変数に分けてほしい

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

7 に答える 7

5

<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"
于 2012-06-12T22:00:53.000 に答える
3

最も簡単な方法は、常にこのタイプのマークアップがある場合、jQuerycontents()を使用することです。

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

例

于 2012-06-12T22:07:02.207 に答える
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());

デモ：http： //jsfiddle.net/skram/Agfyk/2/

于 2012-06-12T22:00:12.147 に答える
0

文字列の形式は変更されないため、最初のスペースで分割して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"]

フィドル： http： //jsfiddle.net/jonathansampson/dBTKZ/

于 2012-06-12T21:59:43.750 に答える
0

これはあまり洗練されていないかもしれませんが.replace()、次のように2番目の変数にjavascript関数を使用できます。

$(document).ready(function(){
    $('#outp').html('first: ' + $('#inp span').html() + '<br/>' +
                    'second: ' + $('#inp').html().replace($('#inp span').html(),''));
});
于 2012-06-12T22:10:58.707 に答える
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());            
});
于 2012-06-12T22:15:57.960 に答える
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>
于 2012-06-12T22:37:20.680 に答える