在JavaScript中拆分字符串以进行进一步处理

时间:2014-02-13 12:14:13

标签: javascript jquery

我需要在JavaScript中处理粘贴的字符串,如下所示:

Introduction
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Something Else
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Another Part: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Finish
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 

这应该是这样的:

<div><h1>Introduction</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>

<div><h1>Something Else</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p></div>

<div><h1>Another Part</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>

<div><h1>Finish</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>

解释

有Textblocks“Introduction”,“Something”,“Another part”和“Finish”(这些词是“搜索字符串”) 我需要找到这些块来用div元素包装它们。 div-Element以下一个文本块(或字符串的结尾)结束 对我来说一个问题是“搜索字符串”可以以“:”结束新行或者没有它们......所以标题中的“:”或“Linebreak”应该被删除。 情况可能是缺少一个块。即只有“简介”和“完成”。这样会导致两个div块。

var text;
var parts = text;
replace(/^[\n\s]*|[\n\s]*$/g, '');
split(/\n\s*\n/g);

但我如何得到标题?喜欢......

如果“简介” - &gt;用h1包装简介

我如何获得p-tag?

1 个答案:

答案 0 :(得分:4)

你可以这样做:

html = text.trim().replace(/(.*?)(\n|:)(.*?)(\n\n|$)/mg, "<h1>$1</h1><p>$3</p>");

Demonstration


我看到你添加了jQuery标签。因此,您可以为要处理的元素定义一个类,然后执行

$('.raw').html(function(_,h){
    return h.trim().replace(/(.*?)(\n|:)(.*?)(\n\n|$)/mg, "<h1>$1</h1><p>$3</p>")
});

Demonstration