简体   繁体   中英

How to add this as html in page

This a data am getting in a ajax call. Its supposed to be html. How can I add this in a div as html? I think the chars are returned in safe format. Is there a way to print it either by javascript or php?

       \n     \n\u003Cscript type=\u0022text\/javascript\u0022\u003E\nvar qid =  28;\n\n\u003C
    \/script\u003E   \n\n\u003Ca href=\u0022#\u0022 class=\u0022test\u0022\u003ETest\u003C
    \/a\u003E\n   \n\u003Cdiv class=\u0022findme view view-test-mode view-id-test_mode 
    view-display-id-page view-dom-id-1\u0022\u003E\n        \n  \n  \n      \u003Cdiv 
    class=\u0022questions\u0022\u003E\n    \u003Ch1 class=\u0022question\u0022\u003EWhich of 
    the following proves or disproves a specific act through oral testimony based on 
    information gathered through the witness\u0027s five senses?\u003C\/h1\u003E
\n\t\u003Cdiv class=\u0022options\u0022\u003E\n\t\u003Cinput id=\u00221\u0022type=\u0022radio\u0022 
    name=\u0022answer\u0022  value=\u0022Circumstantial evidence.\u0022 \/\u003ECircumstantial
     evidence.\u003Cbr\/\u003E\u003Cinput id=\u00222\u0022type=\u0022radio\u0022 
    name=\u0022answer\u0022  value=\u0022Corroborative evidence.\u0022 \/\u003ECorroborative 
    evidence.\u003Cbr\/\u003E\u003Cinput id=\u00223\u0022type=\u0022radio\u0022 
    name=\u0022answer\u0022  value=\u0022Direct evidence.\u0022 \/\u003EDirect evidence.\u003Cbr\/\u003E\u003Cinput id=\u00224\u0022type=\u0022radio\u0022 
    name=\u0022answer\u0022  value=\u0022Conclusive evidence.\u0022 \/\u003EConclusive 
    evidence.\u003Cbr\/\u003E\t\n\t\t\n\t\u003C\/div\u003E\n\t       \u003C\/div\u003E\n  \n 
    \n\t\n    \u003Cdiv class=\u0022item-list\u0022\u003E\u003Cul class=\u0022pager\u0022\u003E
    \u003Cli class=\u0022pager-previous first\u0022\u003E\u003Ca href=\u0022\/qengine
    \/test?page=5\u0022 class=\u0022active\u0022\u003E\u2039\u2039\u003C\/a\u003E\u003C
    \/li\u003E\n\u003Cli class=\u0022pager-current\u0022\u003E7 of 29\u003C\/li\u003E
    \n\u003Cli class=\u0022pager-next last\u0022\u003E\u003Ca href=\u0022\/qengine\/test?page=7
    \u0022 class=\u0022active\u0022\u003E\u203a\u203a\u003C\/a\u003E\u003C\/li\u003E\n\u003C
    \/ul\u003E\u003C\/div\u003E\n  \n \n  \n\n  \n  \u003C!--Total: 29done : 7--\u003E\u003Ca 
    href=\u0022#back\u0022 class=\u0022back\u0022\u003EBack\u003C\/a\u003E|\u003Ca 
    href=\u0022#next\u0022 class=\u0022next\u0022\u003ENext\u003C\/a\u003E |  \u003Ca 
    href=\u0022results\u0022 class=\u0022result\u0022\u003EEnd Test \u0026 Show Results\u003C
    \/a\u003E\t\u003Cbr\/\u003E\u003Cbr\/\u003E\n\t\u003Cinput type=\u0022checkbox\u0022 
    name=\u0022mark\u0022 value=\u0022marked\u0022 class=\u0022mark\u0022\/\u003E Mark For 
    Review   \n  \n  \n  \n  \n  \n\u003C\/div\u003E

The characters are returned in an escaped unicode format. You can encode it as UTF8 with this function:

function encode_utf8( s )
{
  return unescape( encodeURIComponent( s ) );
}

For example:

encode_utf8( '\u003Cscript type=\u0022text\/javascript\u0022\u003E' ); -> '<script type="text/javascript">'

There are 4 search/replaces you'll need to do (by my count) in order to sanitize the input string so that it can be converted to HTML and a fifth one to make it a little more readable. In no particular order:

.replace('\n', '')                  // Removes all encoded newline characters
.replace('\t', '')                  // Removes all encoded tab characters
.replace(/(?:\s+)?<(?:\s+)?/g, '<') // Removes any whitespace before or after a tag-start delimiter.
.replace(/(?:\s+)?>(?:\s+)?/g, '>') // Removes any whitespace before or after a tag-stop delimiter.
.replace(/\s+/g, ' ')               // Replaces all instances of whitespace with a single space. Enhances readability.

Once these are done, you can unescape the string and insert it somewhere in your document:

var normalizedData = data.replace('\n', '').replace('\t', '').replace(/(?:\s+)?<(?:\s+)?/g, '<').replace(/(?:\s+)?>(?:\s+)?/g, '>').replace(/\s+/g, ' ');
document.getElementById('someElement').innerHTML = unescape(normalizedData);

Working fiddle .

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM