如何将项目引入（import）到自己的react项目中？

[Bowen7]

严格来说，这个项目是一个应用（Application），而不是一个库（Library），所以我没有将它发布到 npm 上。

你想引入哪些功能？

[wangchong2023]

严格来说，这个项目是一个应用（Application），而不是一个库（Library），所以我没有将它发布到 npm 上。

你想引入哪些功能？

我们在做个国产化的产品，因为当前这个支持中文对我们来说比较友好。因此，如果能发布到npm上，前端可以更简单的使用和集成官方版本，而不需要本地自己维护1个分支或版本。

我们的业务功能，用户往往需要在页面上输入正则表达式，但是这种容易输入出错（业务上仍然需要）。 因此，我们希望提供给客户看到自己正则表达式代表范围以及验证正则表达式的能力（这个没看到界面支持，如果支持请告诉我，谢谢）。

我们的页面有这样几个按钮元素（非常类似于菜鸟上的这个功能）：. 1、查看正则表达式代表范围的界面元素示意： （1）1个编辑框（输入一个正则表达式） （2）一个预览按钮。

2、测试某个特定的值是否在正则表达式范围内的界面元素： （1）2个编辑框（1个是正则表达式，1个是待匹配内容）； （2）1个输出是否匹配的label； （3）测试按钮。

[Bowen7]

1、查看正则表达式代表范围的界面元素示意：

我考虑发布一个 npm 包，可以将正则表达式渲染成 SVG 图形：

<RegexGraph  regex={yourRegex} />

但可能不会很快发布，可能跟不上你们的产品节奏

2、测试某个特定的值是否在正则表达式范围内的界面元素：

网页右侧第三个 Tab：Test（测试）可以进行测试。对于你的需求，我感觉可以在点击测试按钮后new RegExp(userRegex).test(userInput)获取是否匹配？

[wangchong2023]

1、查看正则表达式代表范围的界面元素示意：

我考虑发布一个 npm 包，可以将正则表达式渲染成 SVG 图形：

<RegexGraph  regex={yourRegex} />

但可能不会很快发布，可能跟不上你们的产品节奏

2、测试某个特定的值是否在正则表达式范围内的界面元素：

网页右侧第三个 Tab：Test（测试）可以进行测试。对于你的需求，我感觉可以在点击测试按钮后new RegExp(userRegex).test(userInput)获取是否匹配？

但可能不会很快发布，可能跟不上你们的产品节奏 -->非常感谢！在您没有发布这个npm包的时候，有啥办法集成这个项目吗？或者有集成步骤吗？

网页右侧第三个 Tab：Test（测试）可以进行测试。对于你的需求，我感觉可以在点击测试按钮后new RegExp(userRegex).test(userInput)获取是否匹配？ -->第3个Tab说实在话没看懂咋用，我在上面的回复中更新了从网上其它地方的示例（可能不需要那些修饰符）。我的直接使用是：1个是正则表达式，1个是待匹配内容，输出是匹配结果（可能包括是否匹配成功，匹配到的位置（可选））。

[Bowen7]

非常感谢！在您没有发布这个npm包的时候，有啥办法集成这个项目吗？或者有集成步骤吗？

没有什么好的办法。你给的示例像是使用了 regulex，regulex 提供了 visualize 方法，可以渲染 SVG：

var parse = require("regulex").parse;
var visualize = require("regulex").visualize;
var Raphael = require('regulex').Raphael;
var re = /var\s+([a-zA-Z_]\w*);/;
var paper = Raphael("yourSvgContainerId", 0, 0);
try {
  visualize(parse(re.source), getRegexFlags(re), paper);
} catch(e) {
  if (e instanceof parse.RegexSyntaxError) {
    logError(re, e);
  } else {
    throw e;
  }
}

function logError(re, err) {
  var msg = ["Error:" + err.message, ""];
  if (typeof err.lastIndex === "number") {
    msg.push(re);
    msg.push(new Array(err.lastIndex).join("-") + "^");
  }
  console.log(msg.join("\n"));
}

function getRegexFlags(re) {
  var flags = "";
  flags += re.ignoreCase ? "i" : "";
  flags += re.global ? "g" : "";
  flags += re.multiline ? "m" : "";
  return flags;
}

regulex 不依赖框架，可以直接使用

我在上面的回复中更新了从网上其它地方的示例

可以用 match 获取匹配结果

const userInput = "abcd";
const userRegex = /(abc)*/
const matches = userInput.match(userRegex);
// 匹配结果 matches[0]: "abc"
// 匹配位置 matches.index: 0，

[wangchong2023]

非常感谢！