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

我为你做了这个：

现场演示：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 回答
0

看看Text.splitText和例子。

于 2012-04-19T16:16:55.343 回答
0

尝试这个 ：

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

使用 each 循环选定的文本p通过获取其 HTML 并替换为来设置元素的contentHTML</p>content<p>

这里的工作示例

更新

感谢@Yoshi 下面的评论......没有each（）循环的更好方法：

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

这里的例子

于 2012-04-19T16:18:37.093 回答