jQuery实现用户输入字符生成字母金字塔异常如何解决

问题现象 #

实现用户输入内容的居中金字塔打印功能时，出现字符取值错误、排版错位、标签无法正常渲染的问题，预期输入demo时输出如下格式的居中金字塔，同时支持给每个字符包裹span标签做自定义样式：

d
  d e
 d e m
d e m o

原有问题代码 #

JavaScript 逻辑 #

function getPyramid(num1){
   var count=$('#'+num1).val().length;
   var string ="";
  for (var i=1;i<=count;i++){
    for(var j=1;j<=count-i;j++){
      string +=" "
    }
    for(var k=1;k <=2*i-1;k++){
      string += num1[k]+" ";
    }
     string +="<br/>";
  }
    $('#pyramid').text(string);
}

HTML 结构 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<input type="text" id="textBoxValue" />
<button  value="Submit"   onclick="getPyramid('textBoxValue');" >Submit</button>
<h2>
      <pre  id="pyramid"></pre>
</h2>
</html>

核心错误点 #

• 取值逻辑错误：传入函数的num1是输入框的ID字符串，不是用户输入的实际内容，直接取num1[k]只能拿到ID字符串的字符，完全无法获取用户输入值
• 索引逻辑错误：JS字符串索引从0开始计数，原代码循环变量k从1开始，会漏掉输入内容的第一个字符；且内层循环按2*i-1次重复取字符，和逐行新增1个字符的需求完全不匹配，会出现大量重复字符
• 渲染方法错误：使用jQuery的.text()方法插入内容时，会把所有内容（包括<br/>、后续要加的span标签）都当做纯文本解析，无法实现换行和标签渲染效果
• 排版逻辑错误：循环生成的前置空格数和字符后的空格数不匹配，无法实现严格居中对齐

修正后可运行代码 #

修正后的JS逻辑（已支持span标签包裹字符） #

function getPyramid(inputId){
   // 先获取输入框的实际输入值
   const inputVal = $('#'+inputId).val();
   const count = inputVal.length;
   let resultStr = "";
  for (let i=1;i<=count;i++){
    // 生成前置占位空格保证居中
    for(let j=1;j<=count-i;j++){
      resultStr +=" ";
    }
    // 逐行输出前i个字符，每个字符用span包裹
    for(let k=0;k <i;k++){
      resultStr += `<span>${inputVal[k]}</span> `;
    }
     resultStr +="<br/>";
  }
  // 用.html()方法渲染，正常识别HTML标签
  $('#pyramid').html(resultStr);
}

原有HTML结构无需调整，替换JS逻辑后即可实现预期效果，包裹字符的span标签可直接通过CSS自定义颜色、字号等样式。

内容的提问来源于stack exchange，提问作者RNK