Generating div or span at textarea by each button

[rpg_digital]

Hi @joon1,

You will have a link at the top of your codepen. It will be something like
codepen.io/joon1/pen/dyQWNEY

Just copy that link and paste it into the text editor here and click return. That should do it

[joon1]

It looks fine. Thank you, rpg.

[Thallius]

@rpg_digital

Just thinking on the fly, you could give the data tag a dash separated unique name for these options e.g.

<button class='wrap-with' data-tag='div-opening' data-attribs='id="id-04" class=""'>
<button class='wrap-with' data-tag='div-closing' data-attribs='id="id-05" class=""'>

You could then maybe use String.split to split on the dash to get the two parts. Split returns an array of the parts.

Isn’t that what data attributes were made for, to avoid this „I put needed information in the html id which I extract with string manipulations“?

If you need another information, add another data-tag

[rpg_digital]

@Thallius

Isn’t that what data attributes were made for, to avoid this „I put needed information in the html id which I extract with string manipulations“?

As I said it was a quick thought, and yes possibly over complicating things. I think you are correct. Something along these lines instead.

<button 
  class='wrap-with' 
  data-tag='div' 
  data-tag-type='opening' 
  data-attribs='id="id-04" class="some-class"'
>

It makes more sense, and saves splitting, destructuring etc.

[joon1]

When I put my mouse in front of “myText” and click the button “open div and class”
It makes the below.

This is <div-opening id="id-04" class=""></div-opening>myText

But what I want is the below.

This is <div id="id-04" class="">myText

I need opening div only because it is opening div.

I don’t know how to apply the code below at my codePen above

@rpg_digital

if (type === 'opening') {
  return `${firstPart}<${tag} ${attributes}>${endPart}`;
} else if (type === 'closing') {
  ...
} else {
  ...
}

[rpg_digital]

@rpg_digital

if (type === 'opening') {
  return `${firstPart}<${tag} ${attributes}>${endPart}`;
} else if (type === 'closing') {
  ...
} else {
  ...
}

I have created this broken codepen for you to try and fix. I don’t know if this is going to be too complicated or even whether it is helpful, but it is worth a try.

You need to replace the …fill the space… sections with the appropriate code.

function wrapText(textArea, tagName, attributes, singleTag) {
  const start = textArea.selectionStart;
  const end = textArea.selectionEnd;
  const text = textArea.value;
  const firstPart = text.substring(0, start);
  const selectedText = text.substring(start, end);
  const endPart = text.substring(end);
  const selection = start !== end // true or false

  if (singleTag === 'opening') {
    return `${firstPart}<${tagName} ${attributes}>${selectedText}${endPart}`;
  } else if (singleTag === 'closing') {
    return `..fill this space..`;
    // no singleTag, so both. Is there a selection though?
  } else if (/* ..fill this space.. */) {
    return `..fill this space..`;
  }
  // no selection and both, return text as is
  return textArea.value;
}

function wrapWith(dataset, textArea) {
  const tagName = dataset.tagName || "div";
  const attributes = dataset.attribs || "";
  const singleTag = dataset.singleTag;
  
  return wrapText(textArea, tagName, attributes, singleTag);
}

I have created some dummy text areas and datasets to test this with

// Some tests with mock text areas and mock datasets

// the word 'ipsum' is selected.
const selectedTextArea = {
  selectionStart: 6,
  selectionEnd: 11,
  value: 'Lorem ipsum dolor sit amet.'
};

// no selection just a cursor at the end of 'ipsum'
const unselectedTextArea = {
  selectionStart: 11,
  selectionEnd: 11,
  value: 'Lorem ipsum dolor sit amet.'
};

// only opening tag
const dataset01 = {
  tagName: 'div',
  attribs: 'id="id-02" classname="div-02"',
  singleTag: 'opening'
};

// only closing tag
const dataset02 = {
  tagName: 'div',
  singleTag: 'closing'
};

// no singleTag, so opening and closing
const dataset03 = {
  tagName: 'div',
  attribs: 'id="id-02" classname="div-02"'
};

Here are my results with the …fill the space… sections completed.

console.log(wrapWith(dataset01, selectedTextArea))
// "Lorem <div id='id-02' classname='div-02'>ipsum dolor sit amet."

console.log(wrapWith(dataset02, selectedTextArea))
// "Lorem ipsum</div> dolor sit amet."

console.log(wrapWith(dataset03, selectedTextArea))
// "Lorem <div id='id-02' classname='div-02'>ipsum</div> dolor sit amet."

console.log(wrapWith(dataset03, unselectedTextArea))
// "Lorem ipsum dolor sit amet."

As a bonus I have written the following function (commented out), which would enable you to shorten the wrapText function.

function getTextAreaParts (textArea) {
  const start = textArea.selectionStart;
  const end = textArea.selectionEnd;
  const text = textArea.value;

  return {
    firstPart: text.substring(0, start),
    selectedText: text.substring(start, end),
    endPart: text.substring(end),
    selection: start !== end // true or false
  }
}

I do get the impression you are maybe trying to run before you can walk with this project joon1, but maybe I am wrong.

[joon1]

@rpg_digital

I do get the impression you are maybe trying to run before you can walk with this project joon1, but maybe I am wrong.

I don’t fully understand the quote above at first.
I think or guess now that you’re right.
I should walk this time as you see.
Although I am not sure I can run or fly, I like to do my trials for walk today, run the day after tommorow and even fly in the future.

By the way I think I lost my way at the moment.

I am afraid that the codePen above doesn’t work.

[rpg_digital]

joon1, I’m off to work now, so will have a look at this later

[rpg_digital]

@joon1

I am afraid that the codePen above doesn’t work.

Yes that’s right it needs fixing.

function wrapText(textArea, tagName, attributes, singleTag) {
  const start = textArea.selectionStart;
  const end = textArea.selectionEnd;
  ...

  if (singleTag === 'opening') {
    return `${firstPart}<${tagName} ${attributes}>${selectedText}${endPart}`;
  } else if (singleTag === 'closing') {
  return `..fill this space..`;
  // no singleTag, so both. Is there a selection though?
} else if (/* ..fill this space.. */) {
    return `..fill this space..`;
  }
  // no selection and both, return text as is
  return textArea.value;
}

The bits that need replacing/fixing …fill this space…

The first one is done for you.

return `${firstPart}<${tagName} ${attributes}>${selectedText}${endPart}`;

This one for instance you can try to fix.

else if (singleTag === 'closing') {
  return `..fill this space..`;
  // no singleTag, so both. Is there a selection though?
}

This might help

Template literals (Template strings) - JavaScript | MDN

JavaScript ES6 Template Literal Strings in FIVE Minutes

[joon1]

With the new codePen above, when I click a button in the below the textarea, nothing happens.

It is actually same as I posted already which is in the below

The only change is “// no singleTag, so both. Is there a selection though?”.
Futhermore it is, I think, not code but comment.

return ..fill this space..;

I guess that you are saying I should fill the space with my own way.
I think I need some example of it for understanding how to change it.

Walking is my target at the moment. Running and flying is just a hope like i hope having billions of dollars but I have some coins in my pocket in reality

[rpg_digital]

@joon1

I think I need some example of it for understanding how to change it.

Did you look at the links I gave you in post #30?

We are here to help, but you need to do your own research as well, a bit of googling, read up on topics, watch tutorials etc. — do a bit of experimenting.

Me filling in the blanks for you, isn’t going to help you learn and it does make me wonder what your goal is here. Do you want someone else to do this project for you?

I think you would benefit from learning the basics. This guy is a good teacher.

Edit:

I did update the codepen

I won’t be assisting with this project anymore though, sorry.

[joon1]

I think you would benefit from learning the basics. This guy is a good teacher.

Thank you for your suggestion.
I will watching, but later, the vedio carefully after I understand the more basic of javascript, and English without google translater.

Although I give up my target result at the moment. I will challenge, but later, it when the condition above is prepared. Thank you for your assistance, guide, and help.