What jQuery function is equivalent to PHP's str_replace?

Question

I am trying to find all attributes of an option tag (except the value) so I can replace the option tag with a list item tag and then add the attributes to the list item. Every Google result I come across says to use replace() to do this, however, I am getting the following error in console:

Uncaught TypeError: undefined is not a function

This occurs on the following line:

var elemAtts = $(this).replace('<option value="'+$(this).prop("value")+'" ', '');

This is the entire script:

$('select').each(function(){

        var selectName = $(this).prop("name");
        var selectOpts = $(this).find("option");
        var selectPar = $(this).parent();

        var hiddenInput = '<input type="hidden" name="'+selectName+'" value="">';

        var menu = '<div class="jqSelect">' + 
            '<div class="selected-text" id="'+selectName+'-selected"><div id="'+selectName+'-text">'+$(this).find(":selected").text()+'</div>' + 
            '<div class="caret" onclick="$(\'ul#'+selectName+'-menu\').toggle();"></div>' +
            '<ul id="'+selectName+'-menu">';

        selectOpts.each(function(){

            if($(this).is(":selected")){

                $('#'+selectName+'-selected').text($(this).text());
                menu += '<li class="selected"';

            } else {

                menu += '<li';

            }

            var elemAtts = $(this).replace('<option value="'+$(this).prop("value")+'" ', '');
            elemAtts = elemAtts.replace('>', '');

            menu += ' data-option-value="'+$(this).prop("value")+'" '+elemAtts+'>'+$(this).text()+'</li>';

        });

        menu += '</ul></div>';

        selectPar.html(menu + hiddenInput);

        $('ul#'+selectName+'-menu').hide();

        generatedMenu = $('#'+selectName+'-menu');
        generatedMenu.find('li').each(function(){

            $(this).on('click', function(){

                $('#'+selectName+'-text').text($(this).text());
                $('#'+selectName+'-menu').hide();
                $('input[name="'+selectName+'"]').attr("value", $(this).data('option-value'));
                $(this).siblings().removeProp('class');
                $(this).prop('class', 'selected');
            });

        });

    });

Basically what I am trying to do is turn this...

<option value="123" rel="toggleElem" class="foo" id="bar">Hello!</option>

Into this(string form)...

rel="toggleElem" class="foo" id="bar"

score 1 · Accepted Answer · edited May 23 '17 at 12:07

Ok, I did a bit more Google-ing and found an answer here. I was thinking that replace() was a jQuery function when it's actually a JavaScript function. The error was happening because I was using it directly with $(this). All I had to do was the following:

var tag = $(this).prop('outerHTML');
var elemAtts = tag.replace('<option value="'+$(this).prop("value")+'" ', '');
elemAtts = elemAtts.replace('>'+$(this).text()+'</option>', '');

charlietfl · Answer 2 · 2014-07-05T13:07:16.753

Every dom node has an attributes property which is a map of all of it's attributes.

You can loop through those to pass them to another element and not need to worry about any string replacement.

Following will transform a single <option> to an <li> with identical attributes:

var $opt=$('option');

/* get the attributes of the DOM node */
var optAttributes = $opt[0].attributes;

/* new attribute object to pass to new <li> */
var listItemAttr={};

$.each( optAttributes, function( _, attr){
   /* each attribute object has a "name" and "value" property*/
   listItemAttr[attr.name]= attr.value 
});

var $li=$('<li>', listItemAttr).text( $opt.text() );

Modify a bit to remove the value attribute if you want

DEMO

MDN Node.attributes docs

What jQuery function is equivalent to PHP's str_replace?

2 Answers2