Início / coding / Perguntas / 77715877
Accepted
Nancy Moore
Asked: 2023-12-26 14:05:37 +0800 CST

como substituir corretamente o hífen por elementos div em javascript

  • 772

Eu tenho o seguinte texto stackoverflow-is-the-best-site-in-the-world por hífen. Preciso substituir esses hífens e colocar cada texto nas tags div conforme o exemplo de resultado abaixo

<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>

Em PHP posso fazê-lo funcionar da seguinte maneira.

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

?>

Aqui está o meu problema. Preciso fazê-lo funcionar com javascript. Para este efeito, aproveitei a solução aqui fonte

mas não consigo fazê-lo funcionar.

aqui está o código até agora.

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);
javascript

5 respostas

  1. Você pode usar a split()função para separar a string em um array de palavras e então usar map()para criar um novo array com cada palavra envolvida em <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);

    • 3

  2. Se você quiser manter seu estilo de código, substitua esta linha:

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

    com

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

    Razões:

    1. Você tem citações em torno da text.replace(..)chamada. Isso tornará o próprio código o texto.
    2. Não há nenhuma variável chamada text. Portanto, substitua-o por strsua variável real.
    3. replace(..)substituirá apenas a primeira instância. Você precisa replaceAll(..)substituir todos -os s.
    • 1

  3. Você pode adicionar a tag abaixo à sua página HTML para que funcione da mesma forma que o PHP acima.

    <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>");
}

    Ele divide o texto de entrada em uma matriz de palavras usando o método split e, em seguida, itera pela matriz, escrevendo cada palavra cercada por tags e no documento

    • 1
  4. Best Answer

    Seu código só precisa de uma pequena correção. Você deve chamar o método replace na strvariável em vez de usá-lo como uma string. Algo como:

    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);

    • 0

  5. Abaixo do código javascript funcionará perfeitamente

    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);

    • 0

relate perguntas