将“<br/>”字符串注入innerHTML

Question

'use strict';                                     

function injectCharacters(){
  var paragraph = document.getElementById( 'paragraph' ),
      text = paragraph.innerHTML,
      ary = text.split( '' ),
      i = 1;
  
  paragraph.innerHTML = '';
  
  for ( i; i <= 52 ; i++ ){
    window.setTimeout(
      ( 
        function( i ){ 
          return function(){
            paragraph.innerHTML +=  ary[ i ];
          }
        } 
      )
      ( i ), i * 100 
    )
  }
}

injectCharacters();

* {
  margin: 0;
}
html,
body {
  overflow: hidden;
  height: 100%;
}
body {
  display: flex;
  font-family: Arial;
}
p {
  margin: auto;
}
.mtx-3d {
  transform:
    perspective( 10rem )
    matrix3D( 
      1, 0.25, 0.5, 0.0075,
      0.25, 2, 2, 0.02,
      1, 2, 3, 4,
      1, 2, 3, 0.75 
    )
}

<p id="paragraph" class="mtx-3d">
  So. Yeah I mean. <br>I've been thinking <br>A lot
</p>

在上面的代码段中，换行符是字面值。我希望显示实际的换行符，而不是看<br>。我该如何解决这个简单的问题？

我怀疑这与我将每个角色分解为数组中的值然后将其输出回段落元素有关，但我可能错了。

Answer 1

每次添加一个新字符，innerHTML +=浏览器会将<和>字符转换为HTMLEntities，因此序列<br>将转换为{ {1}}：

＆＃13;

＆＃13;

<br>

＆＃13;

para.innerHTML += '<';
console.log(para.innerHTML);

＆＃13;

＆＃13;

＆＃13;

要解决此问题，您可以每次使用<p id="para"></p>设置当前内容。

＆＃13;

＆＃13;

innerHTML =  text.slice(0, i);

＆＃13;

'use strict';                                     

function injectCharacters(){
  var paragraph = document.getElementById( 'paragraph' ),
      text = paragraph.innerHTML,
      i = 1;
  
  paragraph.innerHTML = '';
  
  for ( i; i <= 52 ; i++ ){
    window.setTimeout(
      ( 
        function( i ){ 
          return function(){
            paragraph.innerHTML =  text.slice(0,i);
          }
        } 
      )
      ( i ), i * 100 
    )
  }
}

injectCharacters();

＆＃13;

* {
  margin: 0;
}
html,
body {
  overflow: hidden;
  height: 100%;
}
body {
  display: flex;
  font-family: Arial;
}
p {
  margin: auto;
}
.mtx-3d {
  transform:
    perspective( 10rem )
    matrix3D( 
      1, 0.25, 0.5, 0.0075,
      0.25, 2, 2, 0.02,
      1, 2, 3, 4,
      1, 2, 3, 0.75 
    )
}

＆＃13;

＆＃13;

＆＃13;

如果您不想显示<p id="paragraph" class="mtx-3d"> So. Yeah I mean. <br>I've been thinking <br>A lot </p>，<和<b，您可以事先将字符串替换为不太可能显示字符的字符串，并且设置时再次替换它：

＆＃13;

＆＃13;

<br

＆＃13;

'use strict';                                     

function injectCharacters(){
  var paragraph = document.getElementById( 'paragraph' ),
      text = paragraph.innerHTML.replace(/<br>/g, '\u10FF'),
      i = 1;
  
  paragraph.innerHTML = '';
  
  for ( i; i <= 52 ; i++ ){
    window.setTimeout(
      ( 
        function( i ){ 
          return function(){
            paragraph.innerHTML =  text.slice(0,i).replace(/\u10FF/g, '<br>');
          }
        } 
      )
      ( i ), i * 100 
    )
  }
}

injectCharacters();

＆＃13;

* {
  margin: 0;
}
html,
body {
  overflow: hidden;
  height: 100%;
}
body {
  display: flex;
  font-family: Arial;
}
p {
  margin: auto;
}
.mtx-3d {
  transform:
    perspective( 10rem )
    matrix3D( 
      1, 0.25, 0.5, 0.0075,
      0.25, 2, 2, 0.02,
      1, 2, 3, 4,
      1, 2, 3, 0.75 
    )
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

这似乎对我有用：

'use strict';                                     

function injectCharacters() {
  var paragraph = document.getElementById('paragraph'),
      text = paragraph.innerHTML,
      i = 0;

  paragraph.innerHTML = '';

  while (i < text.length) {                                 
    var c = text.charAt(i);
    if (text.slice(i, i + 4) == '<br>') {
        c = text.slice(i, i + 5);
    }
    window.setTimeout(function( c ) { 
        return function() {
          paragraph.innerHTML += c;
        }
      }( c ), i * 100 
    ); 
    i += c.length;
  }
}

injectCharacters();

我基本上重新修改了逻辑以进行检查 '<br>'。 如果找到，请将其附加到下一个字符。这似乎保留了 html中的<br>元素。

Answer 3

你需要将html元素拆分成它自己的元素，这样它最终会像

一样

["a,"b","c","<br>","d","e","f"]

例如，您可以循环遍历元素的每个节点，拆分所有textNodes，当它看到元素时，只需添加元素＆＃39; s html。

Array.from(paragraph.childNodes).forEach(function(node){
  if(node.nodeType == 3){
    ary.push( ...node.textContent.split('') );
  } else {
    ary.push( node.outerHTML );
  }
});

请注意，此示例可能仅适用于不具有子元素（如带子项的div）的元素。如果您的段落最终包含的复杂html不仅仅是<br>，那么它可能需要重构。

演示

＆＃13;

＆＃13;

'use strict';                                     

function start(){
  var paragraph = document.getElementById( 'paragraph' ),
      ary = [];
  Array.from(paragraph.childNodes).forEach(function(node){
    if(node.nodeType == 3){
      ary.push( ...node.textContent.split('') );
    } else {
      ary.push( node.outerHTML );
    }
  });

  paragraph.innerHTML = '';
  
  for ( let i=1; i < ary.length ; i++ ){
    window.setTimeout(function(){ 
      paragraph.innerHTML +=  ary[ i ];
    }, i * 100);
  }
}

start();

＆＃13;

* {
  margin: 0;
}
html,
body {
  overflow: hidden;
  height: 100%;
}
body {
  display: flex;
  font-family: Arial;
}
p {
  margin: auto;
}
.mtx-3d {
  transform:
    perspective( 10rem )
    matrix3D( 1, 0.25, 0.5, 0.0075, 0.25, 2, 2, 0.02, 1, 2, 3, 4, 1, 2, 3, 0.75 )
}

＆＃13;

<p id="paragraph" class="mtx-3d">
  So. Yeah I mean. <br>I've been thinking <br>A lot
</p>

＆＃13;

＆＃13;

＆＃13;