Retrieve a singular term within a Visual Studio Code add-on

As I develop an extension in TypeScript for Visual Studio Code, there's a need to extract a specific word (consisting of dots and hyphens) following the '{{>' prefix.

{{>word-test }}
{{> word-test}}
{{> word-test }}
{{> word-test class="class_name"}}
// this should output 'word-test'

// However, it seems that the regex fails in the following scenario
{{> word-test 
    class="class_name"
}}
// instead of 'word-test', all content in the file is returned

{{> word-test.test }}
// expected result: 'word-test.test'

I utilize the 'getWordRangeAtPosition' feature included in Visual Studio Code, along with a regex pattern as its parameter to retrieve the desired word.

The Issue Encountered

Despite trying various regex patterns, the challenge lies in the failure to retrieve 'word-test' from Visual Studio Code when encountering a line break. Instead, the entire file content is fetched.

Presented below is my latest attempt at a working regex pattern:

/(?<={{>[ \s]{0,1})(.*?)(?=[\n\s\}\}])/

This regex functions flawlessly in online testers but does not yield the intended results within Visual Studio Code itself.

You can test the regex pattern here:

Answer №1

Instead of relying on a complex RegEx pattern, could you implement the logic directly within your extension code?

You can identify the word's position, retrieve the preceding text from the same line in the document, and check if it ends with {{>:

let wordRange = document.getWordRangeAtPosition(position, /\w[-\w\.]*/g);
let leadingText = document.getText(new Range(wordRange.start.with({ character: 0 }), wordRange.start));
let hasCorrectPrefix = leadingText.match(/{{>\s?$/);

If necessary for functionality, you could also verify the suffix in a similar manner.

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

ng-repeat failing to display the final two divs

I'm having trouble with the following code. The second to last div inside the ng-repeat is not being rendered at all, and the last div is getting thrown out of the ng-repeat. I can't figure out what's wrong with this code. Can anyone spot th ...

An issue arises in VueJS when employing brackets and the replace function in Typescript

My journey with the Typescript language has just begun, and I am excited to dive deeper into it. Currently, I am working on a SPA-Wordpress project as a hobby using Vite (VueJS). However, I am facing some challenges with the syntax when transitioning from ...

I am interested in placing nested type names within the initial argument of the setValue function in react-hook-form

I am trying to achieve My goal is to prevent a typescript error from occurring when passing "profile.firstName" as the second argument to the onChange function. Error Explanation The error message indicates that arguments of type '" ...

Adding a total property at the row level in JavaScript

Here is a JavaScript array that I need help with: [{ Year:2000, Jan:1, Feb: }, {Year:2001, Jan:-1, Feb:0.34 }] I want to calculate the total of Jan and Feb for each entry in the existing array and add it as a new property. For example: [{ Year:2000, Ja ...

Why isn't my onClick event functioning as expected?

I used the handleClick function in an onClick event, but it's showing an error (this is not defined). var Buttons = React.createClass({ getInitialState() { return { field: ':P ' } }, handleClick(field ...

Javascript puzzle - I have 99 obstacles

...but a malfunction isn't one. Hey there, I am new to learning so I apologize for the seemingly simple question. I'm experimenting with a theoretical logic statement that would work using javascript. For instance: if (issues == 99) { malfunct ...

It is impossible to conceal the internal element if its height or width is set to 0px

Is there a way to toggle a div's width or height? I tried setting the width to 0, but the inner element remained visible. Any suggestions on how to achieve this toggle width functionality? Check out the solution on JS Fiddle a { display: block ...

I am having trouble with a basic AJAX script using iframes. The first call returns a null element, but all subsequent calls work perfectly. What am I missing?

An AJAX script that performs the following sequence of actions: Creates a hidden iframe to buffer server-side output Loads PHP content silently into a div using the iframe Copies the PHP output from the server-side div to the parent page div The issue e ...

How can I add text to a textbox within a duplicated div using Javascript or Jquery?

I'm looking to add text to a cloned div's text box using jQuery. I have a div with a button and text box, and by cloning it, I want to dynamically insert text into the new div. $(document).ready(function () { $("#click").click(function () { ...

What is the best way to distinguish if users are accessing my Facebook app through an iframe or by directly entering the

If my Twitter app url is http://tw.domain.com/ and the app url is http://apps.twitter.com/demoapp/ I need to ensure that users cannot access the application url directly, they must view it within an iframe on Twitter. What method can I use to detect & ...

Obtaining the value of a command argument with JavaScript in ASP.NET

<asp:LinkButton ID="lnkprogress" runat="server" class="label label-info" BackColor="#589FC2" CommandArgument='<%#Eval("BookingId")%>' OnClientClick="jk();" >In progress</asp:LinkButton> This LinkButton is present in a repeat ...

Get the png image file and display a preview of it

Within my template, I have an img tag that is linked to a state known as "imageBuffer" <img v-bind:src="imageBuffer" alt="" /> In the logic of the page, there are two file inputs and I've utilized a single function to manag ...

Creating and downloading a text/JSON file with dynamic content in Angular 2+ is simple and straightforward

I'm seeking guidance on how to create a text file or JSON file with dynamic data that can be downloaded. Below is the service code: Service Code validateUserData(userId) { var headers = new Headers(); return this.http.get(`${this.baseUrl} ...

Why aren't jQuery events triggering following an AJAX request?

I have created a website that utilizes fading effects to transition between sections while loading new content. One of the features includes enlarging an image upon clicking, which is achieved through a jQuery event trigger. The issue I am facing is that ...

Executing grunt on the necessary dependencies

I am working on 3 different projects that all utilize grunt for automation tasks. Project a has dependencies on project c and b Project b depends on project c Project c does not have any dependencies Both Project a and b require a step to compile pro ...

Could there possibly exist a TypeScript generic that can effectively manage types T, T[], and "*" simultaneously?

As a newcomer to generics in typescript, I find it quite perplexing Is there any way to get the spread operator ... to function correctly in the code snippet below? The Dilemma The line [ key: U, ...rest: Reg[U] ] is not behaving as I anticipated The Q ...

Error: The sort method cannot be applied to oResults as it is not a

I encountered this issue. $.ajax({ url: '${searchPatientFileURL}', data: data, success: function(oResults) { console.log("Results:...->"+oResults); oResults.sort(function ...

Error: 'concurrently command not recognized' even though it was installed globally

I am currently facing an issue on my macOs system. Even though I have installed concurrently globally through npm, whenever I set it as a start script in my package.json file and try running npm start, I encounter the following error. concurrently - k ...

What is the method to determine the number of columns in a 2D array using JavaScript?

I am working with a 2-dimensional array called albumPhotos[x][y]. Each row represents a different photo album, and each column contains a link to a photo. Since each photo album may have a different number of photos, the length of each row in this array v ...

Exploring the concept of Anchors within the React

I am attempting to replicate a layout like this on my React frontend: <p> <h1>Foo</h1> <a href="#second"></a> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labo ...