Here's the task - I have an input field where I can enter a text and I would like to replace the occurrence of Vowels with numbers eg (A,E,I,O,U - 1,2,3,4,5) and add 'a' to all the other consonants eg - The input field takes in 'Victor as an input and what is printed on the page is 'Va3cata4ra'.

So far, i've been able to get the consonants to display an 'a' at the end of it using template literals and passing the variable to a setState. However I'm having issues getting the Vowels to show their numerical values as explained above. I've tried Switch , if else, for some reason, none is working

export default class App extends Component {

state = {
mytext: ''
}

onChangeHandler = (event) => {
    const newText = event.target.value;
    const splitText = newText.split('');
    let tempArr = []

    for (let onye in splitText) {
        else if (onye === 'e') {
            onye.replace(parseInt('2'))
        } else if (onye === 'i') {
            onye.replace(parseInt('3'))
        } else if (onye === 'o') {
            onye.replace(parseInt('4'))
        } else if (onye === 'u') {
            onye.replace(parseInt('5'))
        } else {
            return onye
        }

        //This got the consonants to display a after each one

        const raCon = `${splitText[onye]}a`
        tempArr.push(raCon)
    }

    this.setState({
        mytext: tempArr
    })

Expected result would have 'a' at the end of each consonant and numerical values for every vowel corresponding with (A,E,I,O,U)- (1,2,3,4,5)

Dani AI

Generated

Quick diagnosis and a clean approach.

Common pitfalls in the posted code: iterating with for...in over an array yields index strings, so comparisons against characters fail; calling .replace on a loop variable without assigning the result does nothing; and parseInt is unnecessary when you want the character digits '1'..'5'. As noted, insert string digits. Tagging as JavaScript (React) is correct — thanks .

A compact, reliable solution is to map vowels to digits and build the output in one pass. This preserves consonant case, leaves spaces/punctuation alone, and handles both upper- and lower-case vowels:

const vowelMap = { a: '1', e: '2', i: '3', o: '4', u: '5' };

function transformText(input) {
  return Array.from(input).map(ch => {
    const lower = ch.toLowerCase();
    if (vowelMap[lower]) return vowelMap[lower];
    if (/[a-z]/i.test(ch)) return ch + 'a';
    return ch; // keep spaces/punctuation unchanged
  }).join('');
}

In React, call transformText from the change handler and set state with the returned string.

If a Python example is useful, the same logic translates directly:

vowel_map = {'a':'1','e':'2','i':'3','o':'4','u':'5'}

def transform(s):
    out = []
    for ch in s:
        lower = ch.lower()
        if lower in vowel_map:
            out.append(vowel_map[lower])
        elif ch.isalpha():
            out.append(ch + 'a')
        else:
            out.append(ch)
    return ''.join(out)

Troubleshooting notes: prefer === in JavaScript to avoid type coercion (though character comparisons are fine either way), avoid mutating loop indices, and be aware that /[a-z]/i only matches ASCII letters — use Unicode-aware checks (/\p{L}/u) if you need accented letters.

Recommended Answers

All 2 Replies

Why the parseInts? Don't you just want to insert the character that represents 1,2,3 etc?

And why the === (identity test) rather than a simple == (equals)?

Can someone please tag this thread with the appropriate programming language?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.