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

Question

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

示例：

    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>
`

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

Answer 1

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

Answer 2

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

Typescript 有点奇怪，因为 TS 不知道我们的 RegExp 有一个捕获组，而且我们总是会得到一个 string 作为 [=18= 的第二个参数] 功能。它的类型使得第二个参数，即我们的捕获组，可以是 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));

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

React typescript, how to find all words between '#' in the string

replace

find

typescript

reactjs