Javascript Question posted in
A very good W3school tutorial can be found here.

how to properly replace hyphen with div elements in javascript

I have the following text stackoverflow-is-the-best-site-in-the-world by hyphen. I need to replace those hyphen and surround each text within div tags as per result sample below

<div class='cssx'>stackoverflow</div>
<div class='cssx'>is</div>
<div class='cssx'>the</div>
<div class='cssx'>best</div>
<div class='cssx'>in</div>
<div class='cssx'>the</div>
<div class='cssx'>world</div>

In PHP I can get it working as follow.

<?php
$str ="stackoverflow-is-the-best-site-in-the-world";
echo $output = str_replace('-', "<div class='cssx'></div>", $str);

?>

Here is my issue. I need to get it working with javascript. To this effect, I have leveraged solution here
source

but cannot get it to work.

here is the code so far.

const str ="stackoverflow-is-the-best-site-in-the-world";

var output = "<div class='cssx'>" + 
"text.replace(/-/g, "</div><div class='cssx'>", str)" +
 "</div>";

alert(output);
Tags:

5

Answers


  1. 0

    You can use the split() function to separate the string into an array of words and then use map() to create a new array with each word wrapped in <div> tags.

    let str = "stackoverflow-is-the-best-site-in-the-world";
let wordsArray = str.split('-');

let output = wordsArray.map(word => `<div class='cssx'>${word}</div>`).join('');

console.log(output);
    Login or Signup to reply.
  2. 0

    Your code only needs a small fix. You should call the replace method on the str variable instead of using it as a string. Something like:

    const str = "stackoverflow-is-the-best-site-in-the-world";

const output = "<div class='cssx'>" +
  str.replace(/-/g, "</div><div class='cssx'>") +
  "</div>";

alert(output);
    Login or Signup to reply.
  3. 0

    If you want to retain your style of code, then replace this line:

    "text.replace(/-/g, "</div><div class='cssx'>", str)"

    with

    str.replaceAll( "-", "</div><div class='cssx'>" )

    Reasons:

    1. You have quotes surrounding the text.replace(..) call. This will make the code itself the text.
    2. There is no variable named text. Hence, replace it with str, your actual variable.
    3. replace(..) will replace only the first instance. You need replaceAll(..) for replacing all -s.
    Login or Signup to reply.
  4. 0

    You can add the below tag in to your HTML page so it will work same as the above PHP.

    <script>
var inputText = "stackoverflow-is-the-best-site-in-the-world";
var words = inputText.split('-');

for (var i = 0; i < words.length; i++) {
    document.write("<div class='cssx'>" + words[i] + "</div>");
}

    It splits the input text into an array of words using the split method and then iterates through the array, writing each word surrounded by and tags to the document

    Login or Signup to reply.
  5. 0

    Below javascript code will work perfectly

    function convertToDivs(input) {
  const words = input.split('-');
  let output = '';
  for (const word of words) {
    output += `<div class='cssx'>${word}</div>n`;
  }
  return output;
}

const input = 'stackoverflow-is-the-best-site-in-the-world';
const output = convertToDivs(input);
console.log(output);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search