给定一个带有 html 标签名称和字符串的数组的 Javascript 返回没有 dom 的 html

Question

没有 dom 的 Javascript 字符串到 html。这适用于像这样存储内容数据的内容管理系统。

给定一个数组:

var arr = [['underline', 'italics'], 'some paragraph'];

显示输出:

<u><i>some paragraph</i></u>

var getTag = function(tag, str){
  var text = "";
  switch (tag) {
    case "":
      text = `<p>${str}</p>`;
      break;
    case "italics":
      text = `<i>${str}<i>`;
      break;
    case "underline":
      text = `<u>${str}</u>`;
      break;
    case "strikethrough":
      text = `<s>${str}</s>`;
      break;
    case "bold":
      text = `<b>${str}</b>`;
      break;
    default:
      text = ``;
  }
  return text;
};

arr[0].map((e) => {
  console.log( getTag(e, arr[1]) );
});

预期:

<u><i>some paragraph</i></u>

实际:

<u>some paragraph</u>
<i>some paragraph</i>

Answer 1

一种方法是使用 Array#reduce()以获得所需的结果，其中对于每次 reduce 迭代，该迭代的当前 element 环绕累积结果，如下所示。

要获得所需的包装顺序，elements 数组将首先通过调用 Array#reverse() 来反转:

var arr = [['underline', 'italics'], 'some paragraph'];

/* Extract element and content data from arr */
const [elements, text] = arr;

/* Reduce elements to the result string to wrap result with each 
element iterated */
const result = elements.reverse().reduce((acc, element) => {

  switch(element) {
    case 'underline':
      return `<u>${acc}</u>`;
    case 'italics':
      return `<i>${acc}</i>`;
    case 'strikethrough':
      return `<s>${acc}</s>`;
    case 'bold':
      return `<b>${acc}</b>`;
  }
  
  return acc;

}, text);

console.log(result);