What is the best way to mix up the middle letters within certain positions of a word?

Question

What is the best way to mix up the middle letters within certain positions of a word?

Here is what I have managed to achieve so far:

mounted() {
  const randomVariants = [...Array(3)].map(() =>
    this.baseWord
      .split('')
      .sort(() => 0.5 - Math.random())
      .join('')
  )
  const variantsWithoutInitialWord = randomVariants.filter(
    (word) => word !== this.baseWord // Removing if baseWord is present
  )
  this.result = [...new Set(variantsWithoutInitialWord)] // Removing duplicates
},

I want to generate multiple variations from a single string value, for example: given "orange", the generated values will be:

"ornage"
"oregn"
"ograne"

The first two characters and last one will remain the same. Only the other characters will be shuffled randomly. Additionally, I also need the original value with some static characters like "xy.........z" where only x, y, and z are fixed while the inner characters will be randomized.

javascript vue.js nuxt.js

Answer 1

Answer №1

This approach appears to be effective

<template>
  <div>
    <p>
      The concept involves manipulating a string by keeping its first 2 indexes and last one intact, while shuffling all the others
    </p>
    <pre>found combination for the specified string '{{ baseWord }}'</pre>
    <pre>actual list: {{ results }}</pre>
  </div>
</template>

<script>
const shuffledMiddleLetters = (array) =>
  array
    .split('')
    .sort(() => 0.5 - Math.random())
    .join('')

const wordMiddlePart = (word) => word.slice(2, word.length - 1)

export default {
  data() {
    return {
      baseWord: 'watermelon',
      results: [],
    }
  },
  mounted() {
    const shuffledMiddleLettersVariants = [...Array(50)].map(() =>
      shuffledMiddleLetters(wordMiddlePart(this.baseWord))
    )

    const dedupedVariants = [
      ...new Set([
        wordMiddlePart(this.baseWord),
        ...shuffledMiddleLettersVariants,
      ]),
    ]
    this.results = dedupedVariants.map((dedupedVariants) =>
      [
        this.baseWord.slice(0, 2),
        dedupedVariants,
        this.baseWord[this.baseWord.length - 1],
      ].join('')
    )
  },
}
</script>

Here is the visual representation

https://i.stack.imgur.com/p5Mso.png

Answer 2

This approach appears to be effective

<template>
  <div>
    <p>
      The concept involves manipulating a string by keeping its first 2 indexes and last one intact, while shuffling all the others
    </p>
    <pre>found combination for the specified string '{{ baseWord }}'</pre>
    <pre>actual list: {{ results }}</pre>
  </div>
</template>

<script>
const shuffledMiddleLetters = (array) =>
  array
    .split('')
    .sort(() => 0.5 - Math.random())
    .join('')

const wordMiddlePart = (word) => word.slice(2, word.length - 1)

export default {
  data() {
    return {
      baseWord: 'watermelon',
      results: [],
    }
  },
  mounted() {
    const shuffledMiddleLettersVariants = [...Array(50)].map(() =>
      shuffledMiddleLetters(wordMiddlePart(this.baseWord))
    )

    const dedupedVariants = [
      ...new Set([
        wordMiddlePart(this.baseWord),
        ...shuffledMiddleLettersVariants,
      ]),
    ]
    this.results = dedupedVariants.map((dedupedVariants) =>
      [
        this.baseWord.slice(0, 2),
        dedupedVariants,
        this.baseWord[this.baseWord.length - 1],
      ].join('')
    )
  },
}
</script>

Here is the visual representation

https://i.stack.imgur.com/p5Mso.png

What is the best way to mix up the middle letters within certain positions of a word?

Answer №1

Similar questions

Having trouble accessing dynamically generated elements using Selenium

Triggering a reload on the vuejs router from an external application

What is the method for configuring body attributes in CSS with AngularJS?

The current status of the ajax call is set to 0

The Bootstrap validator triggers the form submission only after the second click

how to sort arrays in javascript

Establishing Redux States within the Provider (error: Provider encountering useMemo issue)

Does the AJAX load more feature duplicate the existing data?

Learn how to call JavaScript code from an HTML file using Ajax

My components views are not being rendered in Angular 4

Using Google App Script to transfer specific columns of a row to a different tab based on the value in a particular column

Accessing JSON key by value alone

AngularJS | Validate input values to ensure they fall within acceptable range for both arrow and user input types

Utilizing use-immer and promises to effectively handle an API route mapping system

Interactive search tool with multiple fields using HTML and JavaScript

Ways to ensure Vue retrieves data from the database whenever a specific event occurs

Is `console.log()` considered a native function in JavaScript?

Ways to Conceal <div> Tag

Insert a zero in front of any single digit hour

Create a custom jQuery plugin that enables users to toggle checkboxes with the click of a button