代码之家 › 专栏 › 技术社区 › basement

将字符串注入innerHTML时,无法正确解释HTML

line-breaks innerhtml css html javascript

basement · 技术社区 · 7 年前

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

在代码段中,输出中的换行符是文字。我希望显示实际的换行符,而不是看到  

我怀疑这与我将每个字符分解成一个数组中的值,然后将其输出回段落元素有关,但我可能错了。

3 回复 | 直到 7 年前

Kaiido NickSlash 7 年前

通过每次附加一个新字符 innerHTML += 浏览器将转换 < > 字符作为HTMLEntities,因此序列   将转换为   :

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

<p id="para"></p>

innerHTML = text.slice(0, i); .

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

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

如果你不想展示 < , <b <br ,您可以将其替换为一些不太可能显示的字符,并在设置时再次替换:

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

}
html,
溢出:隐藏;
身高:100%;
}
车身{
字体系列:Arial;
}
p{
边距:自动;
}
.mtx-3d{
转换:
透视图(10rem)
矩阵3d(
0.25, 2, 2, 0.02,
1, 2, 3, 4,
}

<p id=“paragration”class=“mtx-3d”>
</p>

Anthony McGrath 7 年前

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

我基本上重新设计了逻辑来检查 ' ' .   html中的元素。

Patrick Evans 7 年前

您需要将html元素拆分为它自己的元素,这样它就会像

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

例如,您可以在元素的每个节点上循环,拆分所有textNodes,当它看到一个元素时,只需添加元素的html。

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

  它可能需要重构。

演示

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

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