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

【问题标题】：how to match username and their profile links and how to show the fetched data in table如何匹配用户名及其个人资料链接以及如何在表格中显示获取的数据
【发布时间】：2021-05-19 00:07:13
【问题描述】：

希望你们都平安。这里我遇到了一个问题。这里我使用 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;

【问题讨论】：

标签： javascript reactjs regex react-native

【解决方案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)

我发现这 2 个正则表达式仅可用于提取 url 的名称：

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

剩下的就是解析锚点

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

希望对您有所帮助！

【讨论】：