使JQuery .html（）将属性值包装在单引号中

Question

JQuery by defaults wraps attribute values in double quotes, it also overrides even if the original html string had single quotes as in this example:

$("<div><span class= 'foo' id='foo2' >abc</span></div>").html();

Output:

<span class="foo" id="foo2">abc</span>

I looked up in JQuery documentation, also searched but couldn't find any thing related to this, while I can write a regex replace such as this but I don't want to manipulate HTML with regex for obvious reasons, I was wondering if there is a profound way of achieving this .

Edit:

The reason it is bothering me is at some places in the application there exists codes like htmlstring.indexOf("attr='value'") which eventually broke when I did some manipulation in the htmlstring by converting it into JQuery object and back to string.

Edit 2:

I do not need a solution for the particular problem I stated in my upper edit, I already handled that, what made me ask this question was, is it possible or what is the better way of changing the quote wrapping attributes in HTML.

Answer 1

We have the choice of using single or double quotes for the attributes in HTML but…
… when the page is rendered, they all become double quotes.

I suggest you to use the .attr() method instead of using .indexOf() .

See the snippet below:

 var htmlstring1 = document.getElementById('myDiv1').outerHTML; var htmlstring2 = document.getElementById('myDiv2').outerHTML; console.log("string:", htmlstring1); console.log("string:", htmlstring2, '\\n\\n'); // Note that attr='value' of myDiv2 becomes attr="value" in console console.log(`Using .indexOf('attr="value"'): (will always work)`) if (htmlstring1.indexOf('attr="value"') > -1) console.log('Found.'); else console.log('Not found.'); console.log(`Using .indexOf("attr='value'"): (will never work)`) if (htmlstring1.indexOf("attr='value'") > -1) console.log('Found.'); else console.log('Not found.'); console.log(`Using .attr('attr') == 'value'): (a suggestion)`) if ($('#myDiv1').attr('attr') == 'value') console.log('Found.'); else console.log('Not found.'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="myDiv1" attr="value"></div> <div id="myDiv2" attr='value'></div> 

⋅ ⋅ ⋅

After your comment, I tried some few things…

As you've talked about in your question, there's a trick here:
When an element string is used by jQuery, it gets normalized with double quotes:

 var htmlstring = "<span class='foo' id='foo2'>abc</span>"; console.log(htmlstring); var htmlparsed = $(htmlstring)[0]; console.log(htmlparsed); // You could even create a function to handle the normalization of quotes function norm_quotes(str){ return $(str)[0]; } console.log(norm_quotes(htmlstring)); 

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

I'd suggest you to use your .indexOf("attr='value'") on a string only after it has been parsed by jQuery.

Hope it helps.