1

I have a string containing html code, something like this: http://jsbin.com/ocoteg/1. I want to parse this string, make some changes (just for example: change all links to a span), and then get the modified html string back.

Here is a jsbin, where I started this, but I can't make it work: http://jsbin.com/okireb/1/edit.

I get the html string, I parse it with jquery, but I can't replace the links, and get the modified html string back.

UPDATE

Why the downvote? What is the problem with this question?

Tamás Pap
  • 17,777
  • 15
  • 70
  • 102
  • When you create the jQuery object `dom`, jQuery removes the elements `html` and `body` (there can't be more than one per document). I don't think any jQuery solution that creates an object from the HTML of an entire document will work. – Toni Toni Chopper Dec 06 '12 at 21:10

4 Answers4

1

Use find instead of 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()); ​

Note that I wrap everything for the case where the initial dom isn't one element.

Demonstration

To get the html back as a string use

var html = dom.html();
Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
1

You can do it in a loop also 

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

EDIT:

Here's how you can do it keeping the other tags

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

wirey00
  • 33,517
  • 7
  • 54
  • 65
1

This should be what you want (can be improved)

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
Toni Toni Chopper
  • 1,833
  • 2
  • 20
  • 29
  • +1 For the simplicity. This can be also a solution. I accepted wirey's because he answered first, but I really appreciate your solution. Thank you Toni! – Tamás Pap Dec 06 '12 at 21:54
0

You could do it with .replace. Probably not the nicest way of doing it though.

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

Demo: http://jsbin.com/okireb/14/edit

qooplmao
  • 17,622
  • 2
  • 44
  • 69
  • 1
    I think it _is_ the nicest method, one-liners FTW!! – 11684 Dec 06 '12 at 19:47
  • Using regex for html parsing is always dangereous. Here it would fail with a ` – Denys Séguret Dec 06 '12 at 19:50
  • Very true. I've added a space. I don't think it's the best way of doing it at all but it works for this. I love the bottom of this comment though - http://stackoverflow.com/a/1732454/1791606 – qooplmao Dec 06 '12 at 19:52
  • It works in this case, but will not solve my more complex, real world problem. Thanks for sharing this tip! – Tamás Pap Dec 06 '12 at 20:01