0

私はこの単純なマークアップを持っています：

<p> some content here </p>

に割り込みたい

<p> some </p> content <p> here </p>

javascriptを使用して（またはjQueryヘルプを使用して）。
htmlpタグを壊して、特定の単語（たとえばcontent）がから外れるようにしpます。クロスブラウザと効率的な解決策を見つけたいです。
前もって感謝します。

4

5 に答える 5

2 
(function () {
  $.fn.extend({
    splitAt: function (splitter) {
      this.each(function () {
        var $replacement = $(), $org = $(this);

        $.each($org.text().split(splitter), function (_, val) {
          $replacement = $replacement.add($org.clone().html(val)).add(document.createTextNode(splitter));
        });

        $org.replaceWith($replacement.slice(0, -1));
      });

      return $(this.selector, this.context);
    }
  });
}(jQuery));

$('p').splitAt('content').css('background', 'lightblue');
​

デモ： http： //jsfiddle.net/hSQ2m/6/

于 2012-04-19T16:53:25.093 に答える
1

これを試してください..セレクターと、選択してセレクターから除外する単語を変更するだけです

$('p').text($('p').text().replace('content','</p>content<p>'));
于 2012-04-19T16:16:15.187 に答える
0

と例を見てくださいText.splitText。

于 2012-04-19T16:16:55.343 に答える
0

これを試して ：

$('p').each(function() {
    $(this).html($(this).html().replace('content','</p>content<p>'));​
})

それぞれを使用して選択したテキストをループすると、p要素のHTMLが設定され、そのHTMLが取得されて次のように置き換えcontentられます。</p>content<p>

ここでの実例

アップデート

以下の@Yoshiのコメントに感謝します...each（）ループなしのより良い方法：

$('p').html(function (_, html) {
  return html.replace('content','</p>content<p>');
});​

ここの例

于 2012-04-19T16:18:37.093 に答える
0

私はあなたのためにこれを作りました：

ライブデモ： http： //jsfiddle.net/oscarj24/A4efg/1/

<p></p>これは、タグ内に必要な任意のテキストで機能します。

HTML：

<p> some content here </p>
<input type="button" id="btn" value="Do it!"/>
<br/><br/>
results will be here:
<div id="result"></div>

JS：

$('#btn').click(function(){

    // clean the "result" div each time you invoke "click"
    $('#result').html('');

    // get the text inside "<p></p>" tags
    var str = $('p').html();

    // make an array for all elements inside tag
    // result: ["", "some", "content", "here", ""]
    var substr = str.split(' ');

    // remove "space" elements from the array
    // result: ["some", "content", "here"]
    removeFromArray(substr, '');

    // populate the "result" div where i = index, e = element
    // result:
    //   some
    //   content
    //   here
    $.each(substr, function(i, e){
         $('#result').append('<p> ' + substr[i] + ' </p>');
    });
});

/* Function to remove element from js array */
function removeFromArray(arr){
    var what, a= arguments, L= a.length, ax;
    while(L> 1 && arr.length){
        what= a[--L];
        while((ax= arr.indexOf(what))!= -1){
            arr.splice(ax, 1);
        }
    }
    return arr;
}

CSS-スタイルを整えるだけです:-)

div#result{
   color: red; 
}​

これがお役に立てば幸いです:-)</p>

于 2012-04-19T16:37:53.867 に答える