$(this).text() excludes text after space

Question

$('.ed_name').replaceWith(function() {
  return '<input placeholder=' + $(this).text() + ' value=' + $(this).html() + ' class="ed_inp">'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="ed_name">Akshay Verma(Aks)</li>
</ul>

It returns only "Akshay" not "Akshay Verma(Aks)". I tried .html() method also. can anyone answer why this is happening??

Answer 1

Use jQuery( html, attributes ) to create HTML elements, it will save you from quotes mess and potential issues.

$('.ed_name').replaceWith(function() {
  return $('<input />', {
    "placeholder": $(this).text(),
    "value": $(this).html(),
    "class": "ed_inp"
  });

  //'<input placeholder="' + $(this).text() + '" value="' + $(this).html() + '" class="ed_inp">'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="ed_name">Akshay Verma(Aks)</li>
</ul>

Answer 2

Your attribute values aren’t quoted, so they’ll end at a space. Here’s half a fix:

$('.ed_name').replaceWith(function () {
    return '<input placeholder="'+$(this).text()+'" value="'+$(this).html()+'" class="ed_inp">'
});

but the right way is to create an element, not HTML:

$('.ed_name').replaceWith(function () {
    return $('<input />', {
        placeholder: $(this).text(),
        value: $(this).html(),
        class: 'ed_inp',
    });
});