CODEWITHSUNDEEP
javascriptjqueryhtml
Colby
Colby

Reputation: 313

Replacing string of html with JavaScript

I need to generate a block of HTML for each result I get from a post call. Below is the template:

 var tempScore = '<tr class="brick">' +
    '<div class="brick" style="border: solid 1px #808080; padding: 5px; margin: 10px; overflow-y: auto; width: 100%">' +
    '<h5 class="spamHead">{title}</h5>' +
    '<div style="width: 120px;">' +
    '<h4>{spamStatus}' +
    '<div class="spamStat" style="margin-right: 5px; float: left; background: {color}">' +
    '</div>' +
    '</h4>' +
    '</div>' +
    '<h4 style="text-align: left;">{scoreInject}</h4>' +
    '<div class="spamHeader"><h4>{spamHeaders}</h4></div>' +
    '</div>' +
    '</tr>';

Currently, I loop through and can replace all the bracketed {} items without any trouble. But now I need to add a new span tag that has JavaScript in it, and it's not being replaced properly. Below is one of the possible items I can replace the result with:

tempScore.replace("{scoreInject}", '\<span class=\"tooltip\" onmouseover=\"tooltip.pop(this, \'Outlook' +
                        ' utilizes a self-learning filter to determine what you think is spam. While this is great for individual' +
                        ' users, it’s not consistent nor reliable for use across thousands of tests on our servers. Instead, we’ve ' +
                        'added in hundreds of spam rules that have been published by Outlook. Whenever the content in your campaign ' +
                        'triggers one of these rules, we’ll provide you with feedback on what can be changed to make your email look ' +
                        'less spammy to Outlook. This filter on Litmus uses built-in junk email filter for Outlook, which ships as ' +
                        'part of Microsoft Office. This has various sensitivity settings, here we have set it to ‘High’. The Microsoft ' +
                        'Outlook filter scores from 0-10 on the High sensitivity rating, with 0 being the highest (passing) and 10 being ' +
                        'the lowest (failing). Outlook rates an email with a 6.0 or higher (out of 10) as a failure. A lower score (lower than 6.0) ' +
                        'is considered a passing score with the High sensitivity rating.\', {position:0})"\>Spam Score: {spamScore}\</span\>');

I assume I'm messing up one of the escape characters. Ideally, the span tag and everything in it will be neatly replaced with {scoreInject}. Due to the nature of the process, I cannot easily assign id's to each item and use jQuery to replace the tagged attribute.

Upvotes: 1

Views: 73

Answers (2)

Felippe Duarte
Felippe Duarte

Reputation: 15131

Made a jsFiddle for you: https://jsfiddle.net/eqymm0La/

I think you don't need to scape \<\/span\> and \".

Also, you need to update your var:

tempScore = tempScore.replace("{scoreInject}", '<span class="tooltip" onmouseover="tooltip.pop(this, \'Outlook' +
                    ' utilizes a self-learning filter to determine what you think is spam. While this is great for individual' +
                    ' users, it’s not consistent nor reliable for use across thousands of tests on our servers. Instead, we’ve ' +
                    'added in hundreds of spam rules that have been published by Outlook. Whenever the content in your campaign ' +
                    'triggers one of these rules, we’ll provide you with feedback on what can be changed to make your email look ' +
                    'less spammy to Outlook. This filter on Litmus uses built-in junk email filter for Outlook, which ships as ' +
                    'part of Microsoft Office. This has various sensitivity settings, here we have set it to ‘High’. The Microsoft ' +
                    'Outlook filter scores from 0-10 on the High sensitivity rating, with 0 being the highest (passing) and 10 being ' +
                    'the lowest (failing). Outlook rates an email with a 6.0 or higher (out of 10) as a failure. A lower score (lower than 6.0) ' +
                    'is considered a passing score with the High sensitivity rating.\', {position:0})"\>Spam Score: {spamScore}</span>');

Upvotes: 2

Vexter
Vexter

Reputation: 1172

I don't think you need to escape anything other than the ' character in \'Outlook and rating.\'. So try removing all the other escapes you did.

Also, for consistency always use the same type of quotes in your code. You used ' for everything other than "{scoreInject}" so you might want to change that to have a cleaner code.

Upvotes: 1

Related Questions