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

Posted 2023-03-05

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

【英文标题】：Javascript given an array with html tag names and string return html without dom

【发布时间】：2020-01-15 20:18:51

【问题描述】：

javascript 字符串到没有 dom 的 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>

【参考方案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);

【讨论】：

也许对这个答案的补充可能是我们可以将switch 块提取到一个函数中，比如getTags 或getMarkup，以便它可以独立使用

@DacreDenny 您更新的部分已经被其他用户cjc's answer 作为答案，我们可以参考该答案，

【参考方案2】：

您可以创建一个tagMap object 来保存开始和结束标签，首先循环遍历标签数组以获取开始标签，然后添加文本，然后在反向标签上循环以获取结束标签。

let tagsMap = 
  "":  start: "<p>", end: "</p>" ,
  "italics":  start: "<i>", end: "</i>" ,
  "underline":  start: "<u>", end: "</u>" ,
  "strikethrough":  start: "<s>", end: "</s>",
  "b":  start: "<b>", end: "</b>"

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

let getTag = ([tags,text]) => 
  let final = ""
  
  // adding starting tags
  tags.forEach(tag => 
    final += tagsMap[tag] && tagsMap[tag].start || ''
  )
  
  // adding text
  final += text;
  
  // adding ending tags
  [...tags].reverse().forEach(tag => 
    final += tagsMap[tag] && tagsMap[tag].end || ''
  )
  return final


console.log(getTag(arr))

【参考方案3】：

一种方法是使getTag 递归，仅在没有更多修饰符可应用时返回文本：

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

var getTag = function(arr)
  if (!arr[0].length) return arr[1];
  switch (arr[0].shift()) 
    case "":
      text = '<p>' + getTag(arr) + '</p>';
      break;
    case "italics":
      text = '<i>' + getTag(arr) + '</i>';
      break;
    case "underline":
      text = '<u>' + getTag(arr) + '</u>';
      break;
    case "strikethrough":
      text = '<s>' + getTag(arr) + '</s>';
      break;
    case "bold":
      text = '<b>' + getTag(arr) + '</b>';
      break;
    default:
      text = '';
      break;
  
  return text;
;

console.log(getTag(arr));

【讨论】：

酷，我不会认为它很简单，但仍然是完成工作的另一种方法，我认为它不简单的原因是我个人的观点，只要通过简单的迭代可以实现任何事情，我就不会'不喜欢递归，

@CodeManiac 同意不同意这一点。我认为这是一个需要递归解决方案的问题，因为我们将某些东西放入以相同方式生成的东西中。无论如何，我会通过回报获得我的体育精神徽章......

【参考方案4】：

通过使用带有初始值的reduce，您可以执行您要查找的操作。注意：由于reduce 的参数顺序，您必须为您提供的函数切换参数的顺序（我没有更改函数的实际内容）。

编辑： 要保留订单，您需要使用reduceRight。

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

var getTag = function(str, tag)
  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;
;

var result = arr[0].reduceRight(getTag,arr[1])
console.log(result);

【讨论】：

想要的输出<u><i>some paragraph</i></u>你需要反转标签

切换到使用 reduceRight 来保留订单

【参考方案5】：

另一种方法是从要替换的元素列表中的最后一个元素到第一个元素。

喜欢：

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

var tags = 
  'underline': 'u',
  'italics': 'i',
;


var formatted = arr[0].reverse().reduce((description, tag) => 
  return `<$tags[tag]>$description</$tags[tag]`;
, arr[1]);

console.log(formatted);

使用支持的标签创建哈希 反向处理标签的最后一个元素到第一个元素 对段落应用缩减处理

PS：如果未在标签哈希上定义标签，则需要在 reduce 回调内部进行检查。

【讨论】：

您可以在 SO create a snippet on SO 上创建运行 sn-p