CODEWITHSUNDEEP
javascriptjqueryparsing
Tamás Pap
Tamás Pap

Reputation: 18303

Parse a string in jquery, change something and get the modified string back

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?

Upvotes: 1

Views: 1431

Answers (4)

wirey00
wirey00

Reputation: 33661

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

Upvotes: 1

Toni Toni Chopper
Toni Toni Chopper

Reputation: 1851

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

Upvotes: 1

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382274

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

Upvotes: 1

qooplmao
qooplmao

Reputation: 17759

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

Upvotes: 0

Related Questions