Sublinhar string em JavaScript

Front-end JavaScript
, ,
#1

Eu tenho uma variável do tipo string em javascript, essa string aparece na tela quando o usuário aperta um botão, eu preciso que uma palavra nessa string apareça sublinhada, como eu poderia fazer isso?

Se a tag < u > funcionasse em js seria algo do tipo:

var txt2 = 
	'Lorem <u>ipsum</u> dolor sit amet';
#2

Olá amigo, veja se ter ajuda este código.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Teste</title>
  
  <script type="text/javascript">
    window.onload = function(){
      var sublinha = document.getElementById("txt");
      var botao = document.getElementById("botao");

      botao.onclick = function(){
        sublinha.style = "text-decoration: underline";
      };
    };
  </script>
  
</head>
<body>
  <p>'Lorem <span id="txt">ipsum</span> dolor sit amet'</p>
  <input type="button" id="botao" value="botão"/>
</body>
</html>
1 curtida
#3

Cara, muito obrigado, funciona sim!
Porém eu estou usando uma função que escreve o texto na tela com efeito de máquina de escrever.
Eu deixo o campo de texto vazio e preencho ele através da função JS. Eu uso uma variável do tipo string pra guardar o texto que vai ser escrito, algo do tipo:

<h1 id="t1"></h1> <!-- campo de texto vazio -->

var i = 0;
var txt = 'Seu nome sublinhado.';
var speed = 50;

function typeWriter () {
		if (i < txt.length) {
			document.getElementById("t1").innerHTML += txt.charAt(i);
			i++;
			setTimeout(typeWriter, speed);
		}
	}  // função para preencher o campo com efeito de maquina de escrever

Ou seja, eu teria que achar um jeito de salvar a variável ‘txt’ com a palavra “sublinhado” sublinhada.
Existe um jeito de sublinhar uma palavra de uma string?

#4

veja se desta forma resolve

resultado: https://output.jsbin.com/cilihoy

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[Efeito de maquina de escrever em JavaScript]">
  <meta charset="utf-8">
  <title>Máquina de escrever</title>
  <script type="text/javascript">
        window.onload = function(){
      var txtTitulo = 'Francisco Chaves. Tecnologia com bits codificados.';
      var txt1 = document.getElementById("titulo");
      
      var speed = 100;
      var cont = 0;
      function typeWriter () {
        if(cont < txtTitulo.length){
          txt1.innerHTML += "<u>" + txtTitulo.charAt(cont) + "</u>";
          cont++;
          setTimeout(typeWriter, speed);
         }else{
           cont = 0;
         }
        }
       typeWriter();
    };
  </script>
</head>
<body>
  <h1 id="titulo"></h1>


</body>
</html>
1 curtida
#5

Brother, você também pode selecionar uma palavra.

Caso seja isso, segue abaixo o código. E se quiser ver funcionando: https://codepen.io/filype-ferreira/pen/EEmyqo

Document body{ font-family: Arial, Helvetica, sans-serif; } h1{ font-weight: normal; font-size: 1rem; } .negrito{ font-weight: bold; } 
<h1 id="titulo"></h1>

<script>
  window.onload = function(){
  var txtTitulo = 'Francisco Chaves. Tecnologia com bits codificados.';
  var txt1 = document.getElementById("titulo");
  
  var speed = 100;
  var cont = 0;
  
    function typeWriter () {
    if(cont < txtTitulo.length){
        if(cont >= 10 && cont <= 15){
            if(cont == 10){
                txt1.innerHTML += '<strong id="negrito">' + txtTitulo.charAt(cont);
                cont++;
            }else if(cont <= 15){
                var negrito = document.querySelector('#negrito');
                negrito.innerHTML += txtTitulo.charAt(cont);
                cont++;
            }
        }else{
            txt1.innerHTML += txtTitulo.charAt(cont);
            cont++;
        }
        setTimeout(typeWriter, speed);
     }
    }
   typeWriter();
};
</script>
2 curtidas
#6

Puts então basicamente tenho que contar os caracteres e sublinhar manualmente a parte do texto que eu quero;
Seria tão mais prático se pudéssemos usar tags pra fazer isso dentro das variáveis string por exemplo.

Valeu @Francisco_Chaves e @lype.formiga, Kudos!

#7

Sim, é isso que estava tentando fazer! Valeuuu!

#8

Excelente!!
Parabéns!!