Using regex with javascript on nodejs find html attribute and prepend something to its value

Question

I have some markup in JS as follows:

<div class="col-sm-4">
    <span id="some-media" class="media">Text</span>
</div>

I would like to select the class attribute of the span and prepend its value with lets say the characters: "::". So after the regex replace i would end up with:

<div class="col-sm-4">
    <span id="some-media" class="::media">Text</span>
</div>

EDIT: Note that the order of the attributes in the HTML element is variable so my span attributes could very well have different order like so:

<div class="col-sm-4">
    <span class="::media" id="some-media" >Text</span>
</div>

Is there any specific reason you have to use regex for this? — akuiper
– akuiper, Commented Sep 13, 2017 at 15:09
@thebluefox ive managed to select the attribute with the following regex so far: <span[^>]+class\\s*=\\s*['\"]([^'\"]+)['\"][^>]*>. However i havent been able to prepend the characters to the class value. — asulaiman
– asulaiman, Commented Sep 13, 2017 at 15:12
@Psidom do you any other alternative for accomplishing this? I dont want to include a parser just to solve a small problem like this. — asulaiman
– asulaiman, Commented Sep 13, 2017 at 15:25
Take a look at this answer. BTW, what's wrong with a parser? — akuiper
– akuiper, Commented Sep 13, 2017 at 15:28
Take a look at the second answer to the question you posted as well. I think a parser for solving such a trivial problem is overkill. — asulaiman
– asulaiman, Commented Sep 13, 2017 at 15:33

revo · Accepted Answer · 2017-09-13 15:50:23Z

3

You got a regex solution, this is a DOMmy one:

var html = `<div class="col-sm-4">
    <span id="some-media" class="media">Text</span>
</div>`
var doc = (new DOMParser()).parseFromString(html, "text/html");
var el = doc.getElementsByTagName('span')[0];
el.setAttribute('class', '::' + el.className);
console.log(
  doc.getElementsByClassName('::media').length > 0 // check if modification's done
);

Since you have no way except Regular Expressions this can be considered as a workaround:

(<span[^>]*class=.)([^'"]+)

JS:

var html = `<div class="col-sm-4">
    <span id="some-media" class="media">Text</span>
</div>
<span class="media" id="some-media">Text</span>
`;

console.log(
    html.replace(/(<span[^>]*class=.)([^'"]+)/g, `$1::$2`)
);

edited Sep 13, 2017 at 15:50

answered Sep 13, 2017 at 15:19

revo

49k15 gold badges84 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

asulaiman Over a year ago

I am using nodejs to solve this problem sorry should have mentioned in my question so i dont have access to DOMParser.

revo Over a year ago

What could be the selector? .col-sm-4 span or span alone?

asulaiman Over a year ago

I dont understand the question?

revo Over a year ago

I mean how much big your HTML document would be and what are the rules to match that span? What if that span is a direct child of body? Should it be selected for later modification?

asulaiman Over a year ago

I just want to match all the spans in the markup, there is no other specific rule for matching.

psilocybin · Accepted Answer · 2017-09-13 15:22:18Z

0

This isn't using regex, but you can do it like this in vanilla JavaScript:

const el = document.getElementsByClassName('media')[0];
el.className = '::' + el.className;

Or in jQuery:

const $el = $('div span.media');
$el.attr('class', '::' + $el.attr('class'));

Hope this helps.

answered Sep 13, 2017 at 15:22

psilocybin

1,1151 gold badge7 silver badges26 bronze badges

Comments

RomanPerekhrest · Accepted Answer · 2017-09-13 15:34:59Z

0

Don't parse html with regex, use DocumentFragment (or DOMParser) object instead:

var html_str = '<div class="col-sm-4"><span class="media">Text</span></div>',
    df = document.createRange().createContextualFragment(html_str),
    span = df.querySelector('span');
    
span.setAttribute('class', '::' + span.getAttribute('class'));
console.log(df.querySelector('div').outerHTML);

answered Sep 13, 2017 at 15:34

RomanPerekhrest

93.1k4 gold badges75 silver badges112 bronze badges

1 Comment

asulaiman Over a year ago

Dont have access to either of those in Node.

DNKROZ · Accepted Answer · 2017-09-13 15:43:00Z

0

I think this is what you're after:

var test = $("#some-media")[0].outerHTML();
var test2 = '<div id="some-media" class="media">Text</div>'

if(/span/.test(test)) //Valid as contains 'span'
    alert(test.replace(/(class=")/g, "$1::"));

 if(/span/.test(test2)) //Not valid
    alert(test.replace(/(class=")/g, "$1::"));

edited Sep 13, 2017 at 15:43

answered Sep 13, 2017 at 15:20

DNKROZ

2,9104 gold badges29 silver badges43 bronze badges

5 Comments

asulaiman Over a year ago

I believe this will prepend all class attribute values in the markup with the characters. I am only looking to prepend if it is an attribute of a particular html element (in this case a span).

asulaiman Over a year ago

this wont work if the span is nested under the div which is my usecase.

DNKROZ Over a year ago

@asulaiman Why won't it? how are you getting your span object? See my updated answer. You can use outerHTML() to get the html of an object

asulaiman Over a year ago

The markup is encapsulated in a string that i am trying to parse. This is on node it isnt in a web browser.

DNKROZ Over a year ago

My bad, missed the node part

Shilly · Accepted Answer · 2017-09-13 15:54:16Z

Since the order differs, writing a regex that captures all possible combinations of syntax might be rather difficult.

So we'd need a full list of rules the span follows so we can identify that span? Got some more info about if the span occurs in a longer HTML string? Or is the string this span and this span only?

An alternative would be to use one of the several node DOM modules available, so you can work with HTML nodes and be able to use any of the above solutions to make the problem simpler.

But since you're using node:

1) Are you using any templating engines? If so, why not rerender the entire template?

2) Why does the class name have to change on the server side? Isn't there a workaround on the clientside where you do have access to the DOM natively? Or if it's just to add styling, why not add another css file that overwrites the styling of spans with className 'media'?

3) If all of the above is not applicable and it;s a trivial problem like you say, what error di you get using a simple replace?

strHTML.replace( 'class="media"', 'class="::media"' )

or if it has to be regex:

strHTML.replace( /class=\"(.*)\"/, 'class=\"::$1\"' );

Collectives™ on Stack Overflow

Using regex with javascript on nodejs find html attribute and prepend something to its value

5 Answers 5

5 Comments

Comments

1 Comment

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related