1

我有一个包含 html 代码的字符串，如下所示：http: //jsbin.com/ocoteg/1。我想解析这个字符串，进行一些更改（例如：将所有链接更改为跨度），然后取回修改后的 html 字符串。

这是一个 jsbin，我从这里开始，但我无法让它工作：http: //jsbin.com/okireb/1/edit。

我得到了 html 字符串，我用 jquery 解析它，但我无法替换链接，并取回修改后的 html 字符串。

更新

为什么投反对票？这个问题有什么问题？

4

4 回答 4

1

使用 find 而不是 filter ：

var dom = $('<div>'+text+'</div>');
dom.find('a').each(function() {
  var el = $(this);
  var html = el.html();
  var span = $('<span/>').html(html);
  el.replaceWith(span);
});    
console.log(dom.children()); ​

请注意，我为初始 dom 不是一个元素的情况包装了所有内容。

示范

要将 html 作为字符串返回，请使用

var html = dom.html();
于 2012-12-06T19:42:09.593 回答
1

您也可以循环执行

dom.each(function(i,v){
  if(v.tagName == "A"){
    dom[i] = $('<span/>').html($(v).html())[0]; // replace it right away with new span element
  }
});

var newString = $('<div>').append(dom.clone()).html(); //<-- to get new string http://stackoverflow.com/a/652771/1385672
console.log(newString);​

编辑：

这是保留其他标签的方法

var dom = $(text.split('\n'));  

$(dom).each(function(i,v){ 
  var ele = $(v)[0];      
  if($(ele).is('a')){            
     dom[i] = $('<div>').append($('<span/>').html($(v).html())).html();        
  }
});

var newString = dom.get().join('\n');

http://jsbin.com/okireb/32/edit

于 2012-12-06T20:03:56.740 回答
1

这应该是你想要的（可以改进）

var text = '<!DOCTYPE html><html><head><meta charset=utf-8 /><title>JS Bin</title></head><body><a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a></body></html>';
var body_content = text.substring(text.indexOf('<body>') + 6, text.indexOf('</body>'));
var $dom = $('<div/>').html(body_content);
$('a', $dom).each(function() {
    $('<span>' + $(this).html() + '</span>').insertAfter($(this));
    $(this).remove();
});
var text_new = text.replace(body_content, $dom.html());
// text_new contains the entire HTML document with the links changed into spans
于 2012-12-06T21:25:47.013 回答
0

你可以用 .replace 来做到这一点。可能不是最好的方法。

dom = dom.replace(/<a /g,'<span');
dom = dom.replace(/<\/a>/g,'</span>');

演示：http: //jsbin.com/okireb/14/edit

于 2012-12-06T19:45:21.363 回答