Find all html characters in drop-down option text and replace them via jQuery

Question

I have a dropdown menu that pulls in text from a database column. The database column can include HTML mark-up. In the drop-down I obviously don't need that in the text. I am working on some jquery and it partially accomplished what I'm looking for. However, it seems to only be replacing the first instance of each character

$('select option').each(function() { 
    this.text = this.text.replace('&nbsp;', ' ');
    this.text = this.text.replace('<div>', '' );
    this.text = this.text.replace('</div>', '' );
});

Here is the HTML for the drop-down:

<select name="ctl00$SubPageBody$ClassList" id="ctl00_SubPageBody_ClassList">
<option value="196">Four Week Series: July 19, 2012, 11:00am-12:00pm&<div>July 26, 2012, 11:00am-12:00pm&nbsp;</div><div>August 2, 2012, 11:00am-12:00pm</div><div>August 9, 2012, 11:00am-12:00pm</div></option>

</select>

It would make more sense to do this on the server-side. The server-side script that generates the HTML source code should do this task. — Šime Vidas, Jun 15 '12 at 15:15
I think it's better to strip out unnecessary markup on server side script — Fabrizio Calderan, Jun 15 '12 at 15:15
Coudn't agree more, unfortunately I'm having trouble getting the source from the developer. — Jon Harding, Jun 15 '12 at 15:16

score 3 · Accepted Answer · answered Jun 15 '12 at 15:16

3

Not sure why there would be HTML within an <option> element to begin with but...

jsFiddle

$('select option').each(function() { 
    this.text = $(this).text();       
});

answered Jun 15 '12 at 15:16

Gabe

49,577
28
142
181

You can see I have that implemented here: http://midwestanxiety.com/TrainingDetails.aspx?ID=59, however it isn't working, any suggestions? – Jon Harding Jun 15 '12 at 15:27
Not sure why the above didn't work (works in the jsfiddle), try: `this.text = $(this).html(this.text).text();` – Gabe Jun 15 '12 at 15:39

score 0 · Answer 2 · edited May 23 '17 at 10:24

0

Use regular expressions to replace all instances and do whatever fancy stuff you want:

http://davidwalsh.name/javascript-replace

For example, this will replace 'hello' and/or 'wo':

var s = 'hello world hello';
var s = s.replace(/hello|wo/g, '');

Just keep in mind, you can't parse HTML with regexes :)

RegEx match open tags except XHTML self-contained tags

edited May 23 '17 at 10:24

Community

1
1

answered Jun 15 '12 at 15:22

Milimetric

13,411
4
44
56

score 0 · Answer 3 · answered Jun 15 '12 at 15:22

I agree that doing this on the server side would be more appropriate.

If you have to do it with Javascript though, you can use regular expressions:

$(this).text().replace(/REPLACEME/g, 'repclacement');

Mind the g at the end of the RegEx: it's the global flag.

You will also need to escape some special characters like /. So would be </div>.

score 0 · Answer 4 · answered Jun 15 '12 at 15:23

0

You can use the /g option in regex to replace all instances on a line.

this.text = this.text.replace(/<\/div>/g, '' );

Notice that / replaces ' when you want to find with regex.

answered Jun 15 '12 at 15:23

middleinitial

649
3
10

Find all html characters in drop-down option text and replace them via jQuery

4 Answers4