Java Spring: How convert HTML character codes in hex format from textarea to plain text?

Question

I have web application writed in React JS and Java Spring boot. In my Board Component I have form with textarea and button. While debugging when I click on button I am redirect to PostMapping in UserController spring project. My method has one parameter. It's @RequestBody String query. I get text from textarea in HTML character codes in hex code. I need to plain text from this String.

I get something what look like this:

CREATE+TABLE+users+%28%0A%09id+INT%2C%0A%09fullName+VARCHAR%28220%29+NOT+NULL%2C%0A%09city+VARCHAR%28120%29+NOT+NULL%2C%0A%09country+VARCHAR%2860%29+NOT+NULL%2C%0A%09PRIMARY+KEY%28id%29%0A%29%3 ...

where + does mean space

I was trying resolve this problem. Nothing works.

First way:

byte[] s = DatatypeConverter.parseHexBinary(query);
System.out.println(new String(s, "UTF-8"));

Second way: Apache Commons Codec - Hex

byte[] bytes = Hex.decodeHex(query.toCharArray());
System.out.println(new String(bytes, "UTF-8"));

Here is my code

Spring project:

UserController class

@Controller
@RequestMapping("fiddle")
public class MainController {

@PostMapping
public ResponseEntity<?> processingQueries(@RequestBody String query) {
    System.out.println(query);

    return new ResponseEntity<String>("Query prcessed successfully.", HttpStatus.OK);
}

}

React JS project:

Board component

import React from 'react';
import TableButton from './TableButton';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { processQueries } from '../actions/queryActions';

class Board extends React.Component {
constructor() {
    super();

    this.state = {
        query: 'Write here your SQL query...'
    }
    this.onChange = this.onChange.bind(this);
    this.resetField = this.resetField.bind(this);
    this.onSubmitRun = this.onSubmitRun.bind(this);
}

onChange(e) {
    this.setState({ [e.target.name]: e.target.value });
}

resetField(e) {
    this.setState({ query: '' });
}

onSubmitRun(e) {
    e.preventDefault();
    console.log(this.state.query);
    this.props.processQueries(this.state.query, this.props.history);
}

render() {
    return (
        <div className="box flex-stretch">
            <div className="blue smallClass">
                <TableButton />
            </div>
            <div className="mediumClass">
                <form onSubmit={this.onSubmitRun}>
                    <textarea 
                        name="query" 
                        className="txtArea"
                        value={this.state.query}
                        onChange={this.onChange}
                        onClick={this.resetField}
                        rows="27"
                    >
                        Write here your SQL queries...
                    </textarea>
                    <input type="submit" value="Run" className="runButton"/>
                </form>
            </div>
            <div className="red largeClass">
                One of three columns
            </div>
        </div>
    );
}
}

Board.propTypes = {
query: PropTypes.string
}

const mapStateToProps = state => ({
query: state.query
})

export default connect(mapStateToProps, { processQueries })(Board);

queryReducer

import { PROCESS_QUERY } from '../actions/types';

const initialState = {
query: ''
}

export default function(state = initialState, action) {
switch(action.type) {
    case PROCESS_QUERY:
        return {
            ...state,
            query: action.payload
        }
    default:
        return state;
}
}

queryActions

import axios from 'axios';
import { GET_ERRORS, PROCESS_QUERY } from './types';

export const processQueries = (query, history) => async dispatch => 
{
try {
    console.log(query);
    await axios.post("/fiddle", query);
    history.push("/fiddle");

    dispatch({
        type: PROCESS_QUERY,
        payload: ''
    })
} catch(error) {
    dispatch({
        type: GET_ERRORS,
        payload: error.response.data
    })
}
}

I need to convert this string from textarea to plain text. Data inserted to textarea are plan SQL queries.

Answer 1

All you need to decode string with UrlDecoder.

String result = java.net.URLDecoder.decode(query, StandardCharsets.UTF_8.displayName());