javascript - 如何匹配用户名及其个人资料链接以及如何在表格中显示获取的数据

Question

希望你们都平安。我在这里遇到了一个问题。在这里，我使用 RegEx 从网站 drupal.org 获取了用户及其个人资料链接。但我也有另一个链接。我只想获取他们的个人资料链接并匹配用户和他们的个人资料链接并在表中显示数据在 React js 中是否可能？目前它看起来像这样

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

请帮助我，谢谢..这是我的 git repo 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;

Answer 1

您可以将用户提取为 anchor ，以确保每个用户都有自己的链接:

示例:<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)

我发现这 2 个正则表达式只能用于提取名称和 url:

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

唯一剩下的就是解析 anchor

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

希望对您有所帮助!