Expression enclosed in double quotes within a JavaScript string

Our company has encountered an issue with an FTL that involves a link with JavaScript functionality. The problem arises when the value contains an apostrophe, causing the link to break. To address this, we utilized the js_string method to solve the issue. However, we had to modify the quotes surrounding the expression from double to single quotes, as double quotes did not work in this scenario.

Question: Is there a way to resolve this issue while keeping the original double quotes around the expression?

For instance, can we use the following format?

<a href='javascript:func("${event.title?js_string}");'>Link</a>

Please note that the above solution does not work as intended.

javascriptjsonescapingfreemarker

Answer №1

It is essential to apply two types of escaping in this scenario: JavaScript string escaping and HTML escaping. Both are necessary since the formats are distinct and the JavaScript is inserted within the HTML code.

Instead of using the primitive method event.title?js_string?html, which may lead to forgetting to include ?html, it is recommended to utilize auto-escaping. For more information on auto-escaping, refer to . If auto-escaping cannot be implemented for any reason, enclose the entire template within 

<#escape x as x?html>...</#escape>
. In either case, simply use ${event.title?js_string} and it should function correctly.

If using #escape, ensure that the incompatible_improvements setting is at least 2.3.20 (refer to ) to ensure that ?html properly escapes '.

Answer №2

To ensure consistency, update the content of event.title by substituting single quotes with &apos; and double quotes with &quot;. This way, you can avoid any confusion regarding the type of quotes used throughout.

Answer №3

?js_string needs to be placed outside of curly brackets {}. It is now recommended to enclose the href value in double quotes " ", especially if you need to include single quotes ' ' within the string, and vice versa. A string cannot contain both single and double quotes, so you must replace one with the other.

Here is the solution:

<a href="javascript:func('${event.title!?js_string}');">Link</a>

This same expression can also be used in JavaScript to handle special characters

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transforming a bezier curve into a flat surface in three.js

I am currently working on creating a curved road in three.js using bezier calculations. However, I am facing a challenge in converting the sequence of curved lines into a curved plane. Within my 3D scene, I have cars, a road made from a plane, and a path ...

javascript3dthree.js

transforming enum types into JSON representations

I am working with two enums: enum myEnum { item_one = 1, item_two = 2, } enum myEnum2 { item_four = 4, item_five = 5, } To facilitate sending them off in an HTTP request, I want to represent these a ...

c#jsonserializationenums

Display hyperlink depending on spinner value

I stumbled upon this JavaScript spinner that displays a countdown feature, which I find quite interesting. The spinner counts down from 15 seconds. I'm curious if it's feasible to customize it so that if you land on a specific category like geogr ...

javascript

The jQuery extension for XDomainRequest in the $.ajax function called onprogress is

Summary: I am trying to make this compatible with this: Detailed Explanation: My goal is to develop a jQuery extension that introduces a progress method to the $.ajax object and works seamlessly with IE8 & IE9's XDomainRequest object. Currently, I ...

javascriptjqueryxdomainrequest

Is there a way to send a variable to PHP and execute it on the current page?

I need to integrate an inventory search feature on a local clothing store's website. The challenge lies in setting up the PHP script that pulls and organizes the data to run on the same page as the search form itself. Given my limited experience with ...

javascriptphpjqueryajax

Creating Scalable Vector Graphics without utilizing identifiers

For instance, if we have defs and rect defined separately, we would typically use an ID. <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="#000" /> <stop offset="100%" stop-color="#fff" /> ...

javascripthtmlsvg

Top technique for extracting json files from post requests using nodejs

Situation: I'm running a Node.js REST server that receives JSON files, parses them, and inserts them into a database. With an anticipated influx of hundreds of requests per second. Need: The requirement is to only perform insertions by parsing the JS ...

javascriptnode.js

Displaying live data from an XMLHttpRequest in a Vue component in real-time

I'm currently working on implementing lazy loading for a list of posts fetched from the WordPress REST API. My goal is to load additional news stories upon clicking an HTML element. However, I'm facing issues with accessing the original Vue inst ...

javascripthtmlwordpressvue.jswordpress-rest-api

Breaking down a JSON Object in Angular 4: Step-by-step Guide

I am working on integrating a JSON API with an Angular 4 frontend, and my goal is to display the data from this JSON Object. Here is the code I have used: <div *ngFor="let Questionnaire of struc.data"> <span>{{Questionnaire.attributes.con ...

javascriptjsonangularapi

leveraging dependency injection to retrieve a function in JavaScript

I'm exploring a way to obtain a function in JavaScript without executing it, but still defining the parameters. My current project involves creating a basic version of Angular's dependency injection system using Node.js. The inject() method is us ...

javascriptnode.jsfunctiondependency-injectionreturn

Exploring the concept of union types and typeguards in TypeScript

I'm struggling with this code snippet: function test(): any[] | string { return [1,2] } let obj: any[] = test(); When I try to run it in vscode, I get the following error message: [ts] Type 'string | any[]' is not assignable to type & ...

javascriptangulartypescripttypes

Updating backgroundPosition for dual background images within an HTML element using Javascript

Issue at Hand: I am currently facing a challenge with two background images positioned on the body tag; one floating left and the other right. The image on the left has a padding of 50px on the left side, while the image on the right has a padding of 50px ...

javascriptcss

Iterate through an array to dynamically assign values to variables using string elements

I'm facing a challenge here. I need to generate 4 new elements with the same class but different IDs without repeating code. Unfortunately, my loop doesn't seem to be working as expected. I've spent the last 2 hours trying to crack this puz ...

javascriptarrays

Ways to make video controls visible following the initial click on the video

I have a collection of videos on my website and I would like them to display with a poster (thumbnail image) initially. The video controls should only appear once the user clicks on the video for the first time. Therefore, when the page is loaded, the cont ...

javascripthtmlcss

Using jQuery to reference my custom attribute---"How to Use jQuery to reference My

Can you explain how to reference a tag using a custom attribute in jQuery? For example, if I have a tag like this: <a user="kasun" href="#" id="id1">Show More...</a> I want to reference the tag without using the id. So instead of using: $( ...

javascriptjqueryhtmljquery-selectors

Failure to choose a value in AngularJS using the Chosen directive

I am currently developing a project with AngularJS and I need to display the selected value. To achieve this, I am utilizing the chosen filter available at: https://github.com/leocaseiro/angular-chosen Below is the code snippet that I have implemented: ...

javascriptangularjs

Acquiring the API through the callback function within a React application

I wrote a function that connects to an API and fetches data: import {API_KEY, API_URL} from "./constants"; export const getOperations = async (id, successCallback) => { try { const response = await fetch(`${API_URL}/tasks/${ ...

javascriptreactjsapi

Using Swift to Demonstrate an Example of an HTTP Get Request

Currently, I am following a tutorial that demonstrates how to make an HTTP Get Request in Swift. The tutorial can be found Here. My goal is to send a get request to my own URL, retrieve the data as a JSON Object, convert it into an NSDictionary object, an ...

jsonswiftserializationnsdictionary

I'm confused why this code is functioning in JSFiddle but not on my HTML webpage

For the first time, I am encountering this issue. I am currently attempting to integrate this code into my application http://jsfiddle.net/TC6Gr/119/ My attempts include: Pasting all the jsfiddle code in a new page without my code, but it doesn't w ...

javascriptjqueryhtmlajax

Distributing JWT to the recipient using Express

Allow me to provide you with an overview of my application, which is quite straightforward. The main concept revolves around a user inputting their accountname and password into an html form on the /Login page like so: <form action="/Login" m ...

javascriptnode.jsexpressjwt