组合两个数组的值

时间:2018-04-06 16:08:36

标签: javascript css arrays

我正在使用Express应用程序并且在尝试匹配两个数组的值时遇到问题

我有一个用户输入的字符串,它来自一个表单(例如<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>)。此字符串包含换行符let analyseStory = req.body.storyText

字符串的一个例子是

\r\n\

然而,在我将其打印到浏览器之前,字符串通过名为pos的文本分析库运行,例如 In the mens reserve race, Cambridges Goldie were beaten by Oxfords Isis, their seventh consecutive defeat. \r\n\r\nIn the womens reserve race, Cambridges Blondie defeated Oxfords Osiris

这将返回字符串中的单词数组及其语法类型

const tagger = new pos.Tagger();
res.locals.taggedWords =  tagger.tag(analyseStory);

目前,当我将这个用户输入的文本打印到屏幕上时,我遍历数组并打印出密钥,然后将其包装在包含该值的类中。这给出了如下结果:

[ [ 'In', 'Noun, sing. or mass' ], [ 'the', 'Determiner' ], [ 'mens', 'Noun, plural' ], [ 'reserve', 'Noun, sing. or mass' ], [ 'race', 'Noun, sing. or mass' ], [ ',', 'Comma' ], [ 'Cambridges', 'Noun, plural' ], [ 'Goldie', 'Proper noun, sing.' ], [ 'were', 'verb, past tense' ], [ 'beaten', 'verb, past part' ], [ 'by', 'Preposition' ], [ 'Oxfords', 'Noun, plural' ], .... ]

这样我就可以设计它们。

这一切都很好,但问题是我在这个过程中丢失了换行符。我真的不确定如何解决这个问题,但我想也许我可以在客户端执行此操作,如果我将初始字符串(<span class="noun-sing-or-mass">In</span> <span class="determiner">the</span> <span class="noun-plural">mens</span>)分解为数组(其中逗号,已满) stop是上面的数组项,然后将analyseStory中提供的语法类型应用于从res.locals.taggedWords字符串生成的数组。但是,我不确定如何做到这一点,或者即使它是解决问题的正确方法。

FWIW如果我在屏幕上打印analyseStory而不通过文本分析,我会通过将字符串包装在analyseStory而不是转换为<span style="white-space: pre-line">User entered string</span>来处理换行符。

任何帮助都非常感激。

4 个答案:

答案 0 :(得分:0)

<span>不是块级元素。默认情况下,它不会换行。您需要使用css将其设置为块级别,或者将文本包装为块级别的内容,如<p>标记。

CSS阻止

span { display: block; }

答案 1 :(得分:0)

此解决方案使用ES6 MapString.replace()与RegExp一起查找分析中的所有单词,并将其替换为具有相关类名的跨度。

您可以在演示中看到它保留了换行符。检查元素以查看类的跨度。

&#13;
&#13;
const str = 'In the mens reserve race, Cambridges Goldie were beaten by Oxfords  Isis, their seventh consecutive defeat. \r\n\r\nIn the womens reserve race, Cambridges Blondie defeated Oxfords Osiris';

const analyzed = [["In","Noun, sing. or mass"],["the","Determiner"],["mens","Noun, plural"],["reserve","Noun, sing. or mass"],["race","Noun, sing. or mass"],[",","Comma"],["Cambridges","Noun, plural"],["Goldie","Proper noun, sing."],["were","verb, past tense"],["beaten","verb, past part"],["by","Preposition"],["Oxfords","Noun, plural"]];

// create Map from the analyzed array. Use Array.map() to change all keys to lower case, and prepare the class name
const analyzedMap = new Map(analyzed.map(([k, v]) => 
  [k.toLowerCase(), v.trim().toLowerCase().replace(/\W+/g, '-')]));

// search for a sequence word characters or special characters such as comman and period
const result = str.replace(/(:?\w+|,|.)/gi, (m) => {
  // get the class name from the Map
  const className = analyzedMap.get(m.toLowerCase());
  
  // if there is a class name return the word/character wrapped with a span
  if(className) return `<span class="${className}">${m}</span>`;
  
  // return the word
  return m;
});

demo.innerHTML = result;
&#13;
#demo {
  white-space: pre-line;
}
&#13;
<div id="demo"></div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

您可以在分析文本之前预处理文本,并用一些特殊字符替换换行符。如下所示:

&#13;
&#13;
const story_with_br = analyseStory.replace(/\n/g, "__br__");
const tagger = new pos.Tagger();
res.locals.taggedWords =  tagger.tag(story_with_br);
&#13;
&#13;
&#13;

希望taggedWords数组包含"__br__",如果是,那么在渲染时你可以添加换行符而不是"__br__"

答案 3 :(得分:0)

你能做的是:

选项1

编辑您正在使用的库,以便它不会忽略您的\r\n

选项2

定义一个复杂的键,用于定义换行符:

const newlinesKey = 'yourkeyvalue';

然后用newlinesKey替换所有换行符:

analyseStory.replace(/\r\n/g, newlinesKey);

然后你可以调用文本分析库:

const tagger = new pos.Tagger();
res.locals.taggedWords =  tagger.tag(analyseStory);

如果标记器没有忽略keyValue,你可以检测到何时必须添加新行。