javascript - 是否可以从 JSON 文件中获取长字符串值并在 HTML 中显示时将其拆分为行？

Question

我有一个包含长字符串值的 JSON 文件。

JSON位于此链接

是否可以将“入站”中的值拆分为更多行以便在 HTML 中更好地显示？

目前显示是这样的

这是我目前的 JS 代码：

let requestURL = 'https://raw.githubusercontent.com/danilovuita/MobileWebDevProject-HitchHike/main/database/HitchDB.json';

let request = new XMLHttpRequest();

request.open('GET', requestURL);

request.responseType = 'json';
request.send();

const lenHelper = request.response;

request.onload = function() {
  const Hitch = request.response;
  console.log(Hitch);
  for( var i = 0 ; i < Hitch.length;i++){
      appendData(Hitch[i]);
  }
}


function appendData(obj){
  
 // const myHeader = document.createElement('h2');
 // myHeader.textContent = obj.City;
 // $('#Cities').append(myHeader);

   const myDivRow = document.createElement('div');
   myDivRow.className = "row";
   const myDivCol = document.createElement('div');
   myDivCol.className = "col";
   const myCard = document.createElement('div');
   myCard.className = "card mt-3";
   const myCardHeader = document.createElement('div');
   myCardHeader.className = "card-header";
   const myCardBody = document.createElement('div');
   myCardBody.className = "card-body";



   const cityName = document.createElement('p');
   cityName.className = "text-primary"
   cityName.textContent = obj.City;

   const routesInb = document.createElement('p');
   routesInb.textContent = obj.Routes.Inbound;

   //const routesOutb = document.createElement('p');
   //routesOutb.textContent = obj.Routes.Outbound;

  myCardBody.appendChild(routesInb);
  //myCardBody.appendChild(routesOutb);
  myCardHeader.appendChild(cityName);
  myCard.appendChild(myCardHeader);
  myCard.appendChild(myCardBody); 
  myDivCol.appendChild(myCard); 
  myDivRow.appendChild(myDivCol);

  $('#appendable').append(myDivRow);  
}

标签： javascripthtmljqueryjson

Answer 1

获取信息、查看其结构并分离组件的做法称为解析。

您的“入站”数据是普通英语的文本，因此我们谈论的是Natural Language Parsing。这不是我们任何人都可以在单个 stackoverflow 答案中涵盖的主题。但是你可以做一些简单的事情。

（1）使用if，检查文本的长度，如果超过一定长度，则仅分隔行（段落...）。

(2) 根据关键标记进行拆分。例如，查找“.”将找到句子分隔符（前提是您的文本布局正确）：

const routesText = obj.Routes.split('. ')

您可以寻找替代的分隔符，例如，如果您的文本始终以相同的方式结构化，则可以使用关键字、其他标点符号、单行或双新行（使用 '\n' 或 '\n\n'）

(3) 处理你的分离元素数组。如果您只想将每个句子放在单独的行或段落中，您可以重新加入它们，在以下之间添加一个新行：

routesInb.innerHtml = routesText.join(".<br />")

或者，每句一个段落：

routesInb.innerHtml = routesText.map(t=>('<p>'+t+'.</p>')).join("")

(4) 一个过程可以更精细，例如每段放两个句子，或者将你的文本分成2（或N）个大致相等长度的段落，或者在句子的开头使用关键字来决定它们是否开始一个段落。 . 但是你永远不会得到一个自然的印象，即文本是由一个理解其含义的作家布置的。

我没有问你是否对原始数据有任何控制权？因为如果是这样，您应该确保数据包含用于布局的 HTML，或者可能包含稍后可以用 HTML 布局替换的降价线索（如 '\n\n'）。