Question

我正在尝试在使用javascript匹配样式规则的正则表达式模式之前添加字符串。它将应用于匹配的每个样式规则。到目前为止，我所做的不起作用。我可能做错了。

有人可以查看我的代码并告诉我正确的方法吗？它适用于WordPress定制器提供的信息。

这是脚本本地化和排队的方式：

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 );
  }
}

前端的相关Javascript如下所示：

( 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 );

根据SO的正则表达式问题规则，我在regex101.com保存了正则表达式

我对Javascript或jQuery解决方案感兴趣，或者只是指向正确的方向。

更新：我在原始问题中遗漏了一些非常重要的信息 - 样式表如何在前端打印以及如何预先添加文本。

前端的当前样式表：

.graybg {
    background-color: #c0c0c0;
}

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

p {
    color: brown;
}

新样式表：

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

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

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

Answer 1

您可以在字符串中使用正则表达式，然后使用new RegExp()创建新的正则表达式。

以下是描述相同内容的示例：

＆＃13;

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));
}

＆＃13;

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

＆＃13;

Answer 2

我想出了如何使用javascript .replace 添加文本。事实证明我并不了解如何正确使用它。根据Mozilla开发人员网络上的documentation for .replace，子字符串（逗号后面的第二部分）为每个正则表达式捕获组都有占位符（$ n）。

因此，我将正则表达式调整为以下内容：

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

在这里，我总共有五个捕获组，第一个包裹第二个，第三个和第四个，然后是第五个。在.replace中，我将整个正则表达式打印到页面上，整个前四个捕获组的价格为1美元最后5美元。我将我需要的字符串添加到子字符串的开头。我的代码现在看起来总体如下：

// 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 );

实际的正则表达式是另一个故事。我将来还需要改变一段时间。当我在regex101上调试它时，调试器发现了大量的回溯。

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

2 个答案: