如何在Java中的正则表达式模式之前添加文本

Question

I'm trying to prepend a string before a regular expression pattern that matches a style rule using javascript. It would be applied for each style rule that matches. What I have thus far doesn't work. I'm probably doing it wrong.

Can someone look at my code and tell me the proper way to do this? It works with information provided by WordPress's Customizer.

This is how the script is localized and enqueued:

function enqueue_jbe_ch_scripts() {
  if( is_home() ) {
    wp_register_script( 'jbe-ch-scripts', plugins_url( 'jbe-ch-scripts.js', __FILE__ ), array( 'jquery' ), '', true );
    wp_enqueue_script( 'jbe-ch-scripts' );
    $parameters = array(
      ... ,
      'display_css' => esc_html( get_theme_mod( 'jbe_custom_css_setting' ) ),
    );     

    wp_localize_script( 'jbe-ch-scripts', 'jbeScriptParams', $parameters );
  }
}

The related Javascript on the front end looks like this:

( function ( $ ) {
  ...
  // Get the content inside of stylesheet
  var jbeUserStylesheet = jbeScriptParams.display_css;

  //var stylesheetContent = jbeUserStylesheet.textContent;

  jbeUserStylesheet.replace( /^([a-z0-9-_]){0,}(#|\.)?[a-z0-9-_,\s]{0,}\s\{([^}])*}$/gmi, '#jbe-custom-html $1' );

  console.log( 'jbeScriptParams.display_css value:' + '\n' + jbeScriptParams.display_css ); // for debugging
}) ( jQuery );

As according to the regex questions rules here at SO, I saved the regex in question at regex101.com

I'm interested in Javascript or jQuery solutions or just being pointed in the right direction.

Update : I left out some very important information in the original question--how the stylesheet prints on the frontend and how the text would be prepended.

The current stylesheet on the frontend:

.graybg {
    background-color: #c0c0c0;
}

h2#custom-h2 {
    text-decoration: underline;
}

p {
    color: brown;
}

The new stylesheet:

#jbe-custom-html .graybg {
    background-color: #c0c0c0;
}

#jbe-custom-html h2#custom-h2 {
    text-decoration: underline;
}

#jbe-custom-html p {
    color: brown;
}

Answer 1

You can have regex in a string and then create new regex using new RegExp() .

Following is a sample depicting the same:

 function validate(){ var regex = "_test$"; var _reg = document.getElementById("regex").value; var _val = document.getElementById("value").value; var finalReg = new RegExp(_reg + regex); console.log(finalReg, finalReg.test(_val)); } 

 <input type="text" id="regex" /> <input type="text" id="value" /> <button onclick="validate()">Validate</button> 

Answer 2

I figured out how to prepend the text using javascript .replace . It turns out I wasn't understanding how to use it correctly. According to the documentation for .replace on the Mozilla Developer Network, the substring (second part after the comma) has placeholders ($n) for each regex capture group.

Thus, I adjusted my regular expression to the following:

/^(([a-z0-9-_]{0,})(#|\\.)?([a-z0-9-_,\\s]{0,})){0,}(\\s\\{([^}])*})$/gmi;

Here, I have a total of five capture groups, with the first wrapping the second, third and fourth, followed by the fifth. In .replace, I printed the whole regex to the page with $1 for the entire first four capture groups and $5 for the last. I prepended the string I needed to the beginning of the substring. My code now looks like the following in total:

// Prepend the string #jbe-custom-html to each style rule in style#jbe-ch-frontend

// Assign jbeScriptParams.display_css php variable to another variable
var jbeUserStylesheet = jbeScriptParams.display_css;

/* from the page String.prototype.replace() */
/* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace */
var regexp = /^(([a-z0-9-_]{0,})(#|\.)?([a-z0-9-_,\s]{0,})){0,}(\s\{([^}])*})$/gmi;

var newstr = jbeUserStylesheet.replace( regexp, '#jbe-custom-html $1$5' );

//console.log( newstr ); // for debugging

// Append the new style rules to the end of style#jbe-ch-frontend using jQuery
$( "style#jbe-ch-frontend" ).append( "\n" + "/* User entered styles */" + "\n\n" + newstr );

The actual regular expression is another story. I still will need to change it some time in the future. When I was debugging it on regex101, the debugger found a lot of backtracking.