-1

I'm trying to develop a script that will take user submitted HTML, loop through it to identify matching tags, make adjustments to those matched tags, and then spit out the resulting HTML as plain text that the user can copy. The end goal here is to replace all href's in a submission and replace them with different URL's.

So for example, this:

<a href="http://example.com/">Link A</a>
<a data-track="false" href="http://example.com/">Link B</a>
<a href="http://example.com/">Link C</a>

Becomes this:

<a href="http://newurl.com/link1">Link A</a>
<a data-track="false" href="http://example.com/">Link B</a>
<a href="http://newurl.com/link2">Link C</a>

My first thought was to take the submitted HTML from the <textarea> field and put it in a variable. At this point the HTML becomes a string and I was going to loop through it with a regex to find matching tags. My issue was that I needed to find all <a> tags that did NOT include the attribute data-track="false". And as far as I can tell that's impossible with regex since each link isn't going to be on its own line.

My second thought was to loop through it using jQuery where I could use something like this:

$("a:not([data-tracking='false'])");

But I can't use jQuery like this on a string, right? It needs to be in the DOM.

I'm unsure of the best way to go about doing this. Maybe another language would prove helpful, but other than HTML and CSS, javascript and jQuery are the only ones I'm experienced with.

Any and all help would be greatly appreciated.

Huangism
  • 16,278
  • 7
  • 48
  • 74
jkupczak
  • 2,891
  • 8
  • 33
  • 55

2 Answers2

1

I think your question is similar to Convert String to XML Document in JavaScript

The answer is that you can wrap it in a jQuery object. Then use jQuery's normal DOM manipulation methods on it.

var myhtml = $($('#main-input').val());

myhtml.find('a').each(function () {
    alert($(this).text());
});

if it's a top level element you need to use filter instead of find.

Community
  • 1
  • 1
CS Pei
  • 10,869
  • 1
  • 27
  • 46
  • Thanks for the reply. I tried to apply your code but it's not working for me. I put this codepen together as an example. In my mind it should show an alert immediately with the contents of the `` tag. http://codepen.io/jimmykup/pen/wLlKC/ – jkupczak Aug 01 '14 at 12:28
  • 1
    you need an object of jQuery. so check my updated reply. – CS Pei Aug 01 '14 at 13:00
  • Thanks for the reply. That worked for me. One last thing, I can't seem to take that value I get from the `textarea` and spit it back out into another `textarea`. All I get is `[object Object]`. http://codepen.io/jimmykup/pen/qdwLF – jkupczak Aug 01 '14 at 13:06
  • 1
    now `myhtml` is an jQuery object not a plain string anymore. – CS Pei Aug 01 '14 at 13:34
  • Thanks. I thought I had it figured out with that information, but it turns out I don't. I'll need to post another question about how to output html from a jquery object into a ` – jkupczak Aug 01 '14 at 14:11
0

You can create a jQuery object from html strings outside of the DOM and maniuplate it just the same as if it was in the DOM.

Simple example:

var html='<div><p>ABC</p></div>';

alert( $(html).find('p').text() ); // alerts "ABC"

Or 

var $div= $('<div>').append(html).find('p').after('<p>DEF</p>');
var newHtml= $div.html();

Will return 

<div>
    <p>ABC</p>
    <p>DEF</p>
</div>

Conclusion, I would loop through a jQuery object created from your html and do what you need using jQuery methods

charlietfl
  • 170,828
  • 13
  • 121
  • 150