React typescript，如何在字符串中找到'#'之间的所有单词答案

【问题标题】：React typescript, how to find all words between '#' in the stringReact typescript，如何在字符串中找到'#'之间的所有单词
【发布时间】：2021-04-12 17:47:09
【问题描述】：

我有一个关于我的问题的解决方案的问题。我需要找到字符串中“#”之间的所有单词...

示例：

    const str = `<Table striped bordered hover>
  <thead>
    <tr>
      <th>#project name#</th>
      <th>#First Name#</th>
      <th>#Last Name#</th>
      <th>#Username#</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td colSpan="2">#Footer#</td>
      <td>#social media#</td>
    </tr>
  </tbody>
</Table>
<p> normal text: #Published data# </p>
`

有什么方法吗？我必须在我的表中找到可以将这些单词替换为数据库中的单词。我想过proptype.replaceAll，但我无法通过这个解决它：/

【问题讨论】：

标签： reactjs typescript replace find

【解决方案1】：

String.prototype.replaceAll() 应该可以工作。也许你没有正确使用它？我们想使用 RegExp 来延迟匹配两个 # 符号与捕获组之间的文本。然后你可以使用任何回调函数来替换这些值。

Typescript 有点奇怪，因为 TS 不知道我们的 RegExp 有一个捕获组，并且我们总是会得到一个 string 作为 replacer 函数的第二个参数。它的类型使得第二个参数，即我们的捕获组，可以是any 类型。

/**
 * this is where you implement your actual replacement logic
 */
const findReplacement = (text: string) => {
    switch (text.toLowerCase()) {
        case 'project name':
            return '<span class="project">Project</span>';
        case 'footer':
            return "Replacement for Footer";
        default:
            return text;
    }
}

/**
 * function to handle a string like your example
 */
const processTemplate = (text: string) => {
    return text.replaceAll(
        /#(.*?)#/g, 
        (_, match) => findReplacement(match)
    );
}

在你的字符串上试试

console.log(processTemplate(str));

Typescript Playground Link

可运行堆栈片段（无 TS）

const findReplacement = (text) => {
    switch (text.toLowerCase()) {
        case 'project name':
            return '<span class="project">Project</span>';
        case 'footer':
            return "Replacement for Footer";
        default:
            return text;
    }
}

const processTemplate = (text) => {
    return text.replaceAll(
        /#(.*?)#/g, 
        (_, match) => findReplacement(match)
    );
}

const str = `<Table striped bordered hover>
  <thead>
    <tr>
      <th>#project name#</th>
      <th>#First Name#</th>
      <th>#Last Name#</th>
      <th>#Username#</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td colSpan="2">#Footer#</td>
      <td>#social media#</td>
    </tr>
  </tbody>
</Table>
<p> normal text: #Published data# </p>`;

console.log(processTemplate(str));

【讨论】：

【解决方案2】：

    const str = `<Table striped bordered hover>
  <thead>
    <tr>
      <th>#project name#</th>
      <th>#First Name#</th>
      <th>#Last Name#</th>
      <th>#Username#</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td colSpan="2">#Footer#</td>
      <td>#social media#</td>
    </tr>
  </tbody>
</Table>
<p> normal text: #Published data# </p>`;
    const words = [];
    let start = false;
    let word = "";
    for (let i = 0; i < str.length; i++) {
      if (str[i] === "#") {
        if (start) words.push(word);
        word = "";
        start = !start;
      } else {
        if (start) {
          word += str[i];
        }
      }
    }
    console.log(words);

【讨论】：