如何匹配用户名和他们的个人资料链接，并将获取的数据显示在表格中。

Question

希望大家都安全。我遇到了一个问题，我使用正则表达式从Drupal.org网站获取了用户和他们的个人资料链接，但我也得到了其他链接。我想只获取他们的个人资料链接，并匹配用户和他们的个人资料链接，在表格中显示数据，这在React js中是否可能？目前它看起来像这样。

我希望数据看起来像这样：

我希望你能帮助我，谢谢。这是我的git存储库https://gitlab.com/darshankoli2397/react-practice.git

import React,{ Component } from "react"

import Axios from "axios"

class UserList extends Component {
    constructor(prop) {
        super(prop);
        this.onChangeUserName = this.onChangeUserName.bind(this);

        this.onSubmit = this.onSubmit.bind(this);

        this.state = { users: null, profile:"", name:"" }
    }

    onChangeUserName(e) {
      this.setState({ name: e.target.value })
  }

  onSubmit(e) {
    e.preventDefault()

    const userObject = {
        name: this.state.name,

    };
    Axios.get(`https://www.drupal.org/search/user/${this.state.name}`).then(
      response => {
          if (response.status === 200) {
              // all is good
              console.log('all is good');
              console.log(response);
              var olList = response.data.match(/(?<=\<ol class="search-results user-results"\>\s+).*?(?=\s+\<\/ol)/gs);
              
              var links = response.data.match(
                /(\b(https?):\/\/[-A-Z0-9+&@#\\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi

              );
              //preg_match_all('|https?://(?:www\.)?twitter.com/#!/[a-z0-9_]+|im', $text, $matched)
              
              this.setState({ users: olList });
              this.setState({ profile: links });
            } else {
                console.log('something is wrong');
                // something is wrong
            }
        }
    );

  }
   
    render() {
        return ( <React.Fragment>

          <h1 > Search Here users of Drupal < /h1> 
           <form align = "center" onSubmit = { this.onSubmit } >
            <input type = "search" name = "name" onChange = { this.onChangeUserName } placeholder = "Search" required / >
            <button type = "submit" > Search < /button >   
            </form >

          <h3>Relevent Search Results For Your Keywords : </h3>
            
              <table border="2" height="100" width="300">
                  <tr>
                    <td align="center"><h2>Username</h2></td> 
                    <td><h2>Profile Links</h2></td> 

                  </tr>

                  <tr>
            
                      <td dangerouslySetInnerHTML = { 
                          { __html: this.state.users }
                            } />

                      <td align="char" dangerouslySetInnerHTML = {
                          { __html: this.state.profile }
                          
                        } />
                  </tr>
              </table>
                 
        </React.Fragment>
        );
    }
}

export default UserList;

- Darshan Kalli

Answer 1

你可以把用户作为锚点提取出来，以确保每个用户都有自己的链接:

例子：<a href="https://www.drupal.org/user/4088">asdf</a>

let userAnchors = response.data.match(/\<a href="(https?):\/\/www.drupal.org\/user\/\w*">[\w\s]*\<\/a\>/gi)

我找到了这两个正则表达式，你可以用它们来提取名称和URL：

const nameExtractorRegex = /<a[^>]*>([^<]+)<\/a>/g
const linkExtractorRegex = /href="(.*?)"/g

唯一剩下的事情就是解析锚点。

const users = userAnchors.map(anchor => {
    return {
        name: nameExtractorRegex(anchor)[1],
        link: linkExtractorRegex(anchor)[1]
    }
})

希望它有所帮助！

- Domotor Zsolt