在HTML链接中使用javascript变量时的正确语法

Question

I am simply trying to combine a simple html (php) link and include a JS variable. This is what I have but the syntax is incorrect. Suggestions?

$.each(playlist, function(index, val) {
    playlistHtml += "<form name="form" method="post" action="../_inc/process_track_move.php?track="+val.sources[0].title"
});

Answer 1

A suggestion along with the answer, Answer: you need to use both single and double quotes. Suggestion: use a variable to take the link out of the logic. It's easier to see and edit this way. This is not required, but makes it more readable when you come back to it.

This example is based on what you provided.

$.each(playlist, function(index, val) {
    var baseLink = "../_inc/process_track_move.php?rack=";
    playlistHtml += 
"<form name='form' method='post'
action='" + baseLink + val.sources[0].title + "'";
});

This would be assuming you wanted to close the form link and just didn't include.

$.each(playlist, function(index, val) {
    var baseLink = "../_inc/process_track_move.php?rack=";
    playlistHtml += 
"<form name='form' method='post'
action='" + baseLink + val.sources[0].title + "'></form>";
});

Answer 2

You should single quotes inside the double quotes, like

$.each(playlist, function(index, val) {
    playlistHtml += "<form name='form' method='post' action=' ../_inc/process_track_move.php?track='+val.sources[0].title"
});

Answer 3

You generally should not be assembling raw HTML manually in JavaScript; it's easy to get wrong. In your case, even if your code worked, it would be vulnerable to encoding errors and XSS security issues because it doesn't properly encode the attribute value.

The safer choice is to use the DOM API, a framework, or a default-safe templating engine to create the elements you need, which will automatically care care of encoding attribute values.

Here's how we could use the DOM API instead of raw HTML for your case.

var playlist = document.createElement('div');  // or document.querySelector('#playlist')?

$.each(playlist, function(index, val) {
    var form = document.createElement('form');
    form.setAttribute('name', 'form');
    form.setAttribute('method', 'post');
    form.setAttribute('action', '../_inc/process_track_move.php?track=' + val.sources[0].title);
    playlist.appendChild(form);
});

playlistHtml += playlist.innerHTML;

You can add the created elements directly to the document, or convert them to an HTML string like you were originally using.

If you really must use raw HTML concatenation, you can't just + a text string on to your HTML, you must encode it as HTML first to avoid security vulnerabilities or errors. At minimum, that means using a function like this:

function textToHtml(s) {
  return s
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');
} 

You must also escape the " s inside your string as \\" for them to parse correctly. This gives us:

playlistHtml += "<form name=\"form\" method=\"post\" action=\"../_inc/process_track_move.php?track=" + textToHtml(val.sources[0].title) + "\"></form>";