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

Guidance on using an array to filter an object in Javascript

PHP does not receive the uploaded image

Utilizing JQuery Ajax to dynamically replace elements using JQuery functions

Adjust the width of xAxis[0] and xAxis[1] in Highcharts to their default values

Tips for enhancing the width of the extrude shape in the x and z axes using Three.js

Guide on accessing APIs for individual elements in an array

Retrieving registered components dynamically in Vue.js

Transitioning one element's opacity to zero while concurrently increasing another element's opacity to replace it

Creating a combination of associative keys and numbers within an array using JavaScript

Integrating external JavaScript libraries into Ionic using the correct process

JavaScript form submission failing to transmit updated data

AngularJS makes it easy to retrieve data from a server using the $

Select component with nested checkboxes for multilevel dropdown

Building a table in Quasar by utilizing nested objects

Printing documents from a database using Mongoose version 7.3.1: A comprehensive guide

The argument provided for the foreach() function in Axios Laravel is not valid

When there is an error or no matching HTTP method, Next.js API routes will provide a default response

Top destination for verifying permissions in vue.js

Preventing v-list-item-group from being deselected in Vuetify

Receive information on browser activity