jquery - jQuery从HTML标签中删除文本

Question

我在使用正则表达式提取<h1></h1>标签时遇到问题。

我有变量：

var t = '<h1>Some cool text in this tag</h1>';

我想让它像这样：

<h1><span>Some</span> <span>cool</span> <span>text</span> <span>in</span> <span>this</span> <span>tag</span></h1>

我的代码如下所示：

var t = '<h1>Some cool text in this tag</h1>';
var reg = /<(.|\n)*?>/ig;  // this is regex for HTML tags
var temp = '';
var s = $(t).text();

temp = '<span>'+ s.split(' ').join('</span> <span>')+'</span>';

$('#output').append(temp);

它应该适用于所有可能的 HTML 标记，即使 var 具有如下字符串：

var t = '<strong>Strong text</strong> with some <em>emphasis</em>';

这里的“工作”示例：http: //codepen.io/halol/pen/DKeIu

Answer 1

尝试使用正则表达式查找匹配的 html 标记很困难，因为它们可能是嵌套的。无论如何，这样的事情会做你需要的吗？或者至少能帮助你朝着正确的方向前进？

$('#target').children().each(function(){
  $(this).wrap('<span></span>');
  t = $(this).text();
  t = '<span>'+ t.split(' ').join('</span> <span>')+'</span>';
  $(this).html(t);
})

这是一个小提琴：http: //jsfiddle.net/s_Oaten/85W3B/

Answer 2

试试这个

var t = '<h1>Some cool text in this tag</h1>';
var text = t.split(' ');

for( var i = 1, len = text.length; i < len; i=i+2 ) {
    text[i] = '<span>' + text[i] + '</span>';
}
alert(text.join(' '))

见http://jsfiddle.net/UReCb/