HTML `img` tag can't display as image in object jquery

Question

I have data from "sugestion" var like this, this after I conevert the object "suggestion" to string.

{"value":"<img src=\"http://localhost/erp/assets/images/product/123.jpg\"> 123123123 t-shirt","data":"ABC098765"}

But <img src="\\"http://localhost/erp/assets/images/product/123.jpg\\"> can't display as image, the image tag only display as text after append to

this is the ouput display.

html += '<div class="' + className + '" data-index="' + i + '">' + formatResult(suggestion, value, i) + '</div>';

The complite script

    $.each(that.suggestions, function (i, suggestion) {
        if (groupBy){
            html += formatGroup(suggestion, value, i);
        }
        html += '<div class="' + className + '" data-index="' + i + '">' + formatResult(suggestion, value, i) + '</div>';
    });

the format result

Autocomplete.formatResult = function (suggestion, currentValue) {
        // Do not replace anything if there current value is empty
        if (!currentValue) {
            return suggestion.value;
        }

        var pattern = '(' + utils.escapeRegExChars(currentValue) + ')';

        return suggestion.value
            .replace(new RegExp(pattern, 'gi'), '<strong>$1<\/strong>')
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/&lt;(\/?strong)&gt;/g, '<$1>');
    };

How to make the image tag as image when the output display?

Thank you

Answer 1

Use this Stripslashes function to strip slash while returning suggestion.value . May be because of the extra slashes your image is not displaying properly.

function stripslashes (str) {
  return (str + '').replace(/\\(.?)/g, function (s, n1) {
    switch (n1) {
    case '\\':
      return '\\';
    case '0':
      return '\u0000';
    case '':
      return '';
    default:
      return n1;
    }
  });
}