The regex pattern checks for the presence of '<' followed by a space or

Question

The regex pattern checks for the presence of '<' followed by a space or

When using a multi-line textbox, I encountered the following string:

index a<3

2<x

I want to use regex to add a space after the character '<' if there isn't already one present. If there is already a space after the character '<', it should remain untouched.

The desired output should be:

index a< 3

2< x

I attempted to use (?<=<)(?!$) and <[^\s]+, but they resulted in syntax errors when used within Javascript.

While these solutions work on the back end (C#), I would prefer not to make a server request for this task as it is not an ideal solution.

javascript regex

Answer 1

Answer №1

Check out this unique technique without relying heavily on regex (alright, just a small amount of regex in the split)

document.querySelector( "textarea" ).addEventListener( "blur", function(){
  var value = this.value;
  //console.log( value );
  this.value = value.split( /\n|\r/ ).map( function(item){
    //console.log( item, item.split( /<|<\s/ ) );
    return item.split( /<\s|</ ).join( "< " );
  }).join( "\n" );
})

Click outside of the textarea below to witness the added spacing
<textarea>
index a<3 
index a<3 
</textarea>

Answer 2

Check out this unique technique without relying heavily on regex (alright, just a small amount of regex in the split)

document.querySelector( "textarea" ).addEventListener( "blur", function(){
  var value = this.value;
  //console.log( value );
  this.value = value.split( /\n|\r/ ).map( function(item){
    //console.log( item, item.split( /<|<\s/ ) );
    return item.split( /<\s|</ ).join( "< " );
  }).join( "\n" );
})

Click outside of the textarea below to witness the added spacing
<textarea>
index a<3 
index a<3 
</textarea>

Answer 3

Answer №2

To implement a basic regex, try using: <\b and substitute it with < ('<' plus space).

Answer 4

To implement a basic regex, try using: <\b and substitute it with < ('<' plus space).

Answer 5

Answer №3

To match any non-space character in JavaScript, you can utilize the \S pattern which is equivalent to a negated character class, [^\s]. Due to the lack of look-behind support in Javascript, one way to achieve this is by matching the < symbol followed by a non-space character and then replacing it with the same < symbol along with a space.

str = str.replace(/<(?=\S)/g, '< ');

// or using negative lookahead
str = str.replace(/<(?!\s)/g, '< ');

var str = 'index a<3\n2<x';


console.log(
  str.replace(/<(?=\S)/g, '< '),
  '\n\n',
  str.replace(/<(?!\s)/g, '< ')
)

Answer 6

To match any non-space character in JavaScript, you can utilize the \S pattern which is equivalent to a negated character class, [^\s]. Due to the lack of look-behind support in Javascript, one way to achieve this is by matching the < symbol followed by a non-space character and then replacing it with the same < symbol along with a space.

str = str.replace(/<(?=\S)/g, '< ');

// or using negative lookahead
str = str.replace(/<(?!\s)/g, '< ');

var str = 'index a<3\n2<x';


console.log(
  str.replace(/<(?=\S)/g, '< '),
  '\n\n',
  str.replace(/<(?!\s)/g, '< ')
)

The regex pattern checks for the presence of '<' followed by a space or

Answer №1

Answer №2

Answer №3

Similar questions

Splitting a loading button within post.map() in React for like/dislike functionality

Vue.js - the value of this is not defined

The message that keeps popping up says "TypeError: Unable to access the 'execute' property of an undefined object."

The process of using Jest to test whether a React component correctly renders a list

problem arising from the origin preventing me from utilizing localStorage in conjunction with JSDOM

React's nested map function is failing to display any results

Best practices for defining module-wide constants in AngularJS

Tips for transforming the input date value from Mui Datepicker

Is there a way to detect when a Bootstrap Alert is displayed?

Template7 produces a bizarre outcome referred to as "each this" whenever JSON is utilized

Different approach to handling response interceptors in AngularJS framework

Sort out the information in the table

Retrieving blog posts formatted in markdown from a centralized JSON file

Monitoring changes to localstorage in AngularJS

The issue of variable stagnation in Firefox content script while utilizing self.port.on

Choose the DIV element based on its data attribute using JSON

What is the best way to capture a screenshot using Gherkin-Cucumber with Testace as the preferred framework?

Customizing React component properties within a Styled Component

I'm curious about how I can selectively utilize vuex-persistedstate with Nuxt for certain stores only

What steps can be taken to fix the error message 'Uncaught TypeError: (...) is not a function'?