String replace (javascript)

Question

I have a piece of string:

'Dow<br> <span class="table-sub-header">Value</span>'

I want to replace 'Value' inside the span with an arbitrary variable. I know that the span class will be there every time.

I've tried things like:

var s = 'Dow<br> <span class="table-sub-header">Value</span>';

And then doing a replace with something like this as the regex:

/<span class="table-sub-header">*</span>/

But it looks messy. Is there a clean way of doing this?

Edit: 'Value' in this case is arbitrary. I don't know what it is and I wanted a general method to replace what is in the span.

Are you within a browser environment? Can you interact with the DOM to get hold of this? — James Thorpe
– James Thorpe, Commented Jun 15, 2016 at 15:44
I am on the browser and I'm getting this value as a property from a library object. I thought it would be weird to change it to a DOM object just for a string placement, especially since I would need to convert the DOM object back to a string. — user1413969
– user1413969, Commented Jun 15, 2016 at 15:47

tsh · Accepted Answer · 2016-06-15 15:45:31Z

3

If you are working in browser, you may try put s in some element innerHTML and replace it as it in dom do

var s = 'Dow<br> <span class="table-sub-header">Value</span>';
t = document.createElement('div');
t.innerHTML = s;
t.querySelector('.table-sub-header').textContent = 'Something Else';
t.innerHTML // 'Dow<br> <span class="table-sub-header">Something Else</span>'

BTW, your regexp should be something like /<span class="table-sub-header">(.*)<\/span>/

answered Jun 15, 2016 at 15:45

tsh

4,8386 gold badges32 silver badges52 bronze badges

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

Comments

Sylvan D Ash · Accepted Answer · 2016-06-15 15:45:14Z

0

Have you tried the replace string method?

var s = 'Dow<br> <span class="table-sub-header">Value</span>';
s = s.replace("Value", "New Value");

answered Jun 15, 2016 at 15:45

Sylvan D Ash

1,13714 silver badges24 bronze badges

3 Comments

James Thorpe Over a year ago

While that answers the very specific example in the question, I'm not sure that's what the OP is after. If you're doing that, you may as well just write var s = 'Dow<br> <span class="table-sub-header">New Value</span>'; in the first place.

Sylvan D Ash Over a year ago

If he's working with strings, then this is the simplest. If he's working with HTML elements (and not strings), then either @tsh answer or $(".table-sub-header").text("my text")

Sylvan D Ash Over a year ago

But he mentioned string...hence the answer

Manish · Accepted Answer · 2016-06-15 15:50:30Z

0

Yes, you can use jQuery for this.

var s = 'Dow<br> <span class="table-sub-header">Value</span>';

var div_wrapper = '<div style="display:none;">'+s+'</div>';

$(document).ready(function(){
    $('body').append(div_wrapper);
    var new_value = 'newvalue'; // an arbitrary variable
     $('.table-sub-header').text(new_value);
     console.log($('.table-sub-header').text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>
  <body>
    
    </body>
  </html>

answered Jun 15, 2016 at 15:50

Manish

2471 silver badge10 bronze badges

2 Comments

tsh Over a year ago

is string s trustable? what if s = 'Dow<br> <span class="table-sub-header"><script>alert(/xss/)</script></span>'

Manish Over a year ago

@tsh string s should be trustable, Else you need to refine it before appending it to div using javascripts filter html tags option.

Vasfed · Accepted Answer · 2016-06-15 16:07:24Z

0

You can dynamically replace what is in the span tag by using JavaScript or any JavaScript library. For example using Javascript you can use a class selector to select the span and set the inner html to whatever value you want based on a condition or logic of some sort. You can also use Jquery .text()

refer to the links below https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML http://api.jquery.com/text/

edited Jun 15, 2016 at 16:07

Vasfed

18.6k10 gold badges56 silver badges59 bronze badges

answered Jun 15, 2016 at 15:55

Frank Odoom

1,56418 silver badges19 bronze badges

Collectives™ on Stack Overflow

String replace (javascript)

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related