Как преобразовать строку в действительный список html с помощью regexp

Question

Я работаю над приложением angularjs.

Я получаю данные как массив из back-end. Мне нужно преобразовать это в список html. (используя li), но как я могу это сделать?

здесь массив string я получаю:

"1. Submittals in progress 2. Structural works in progress in S2 & S3 3. Structural works in progress in N4. 4. Childrens Mall pedestal and steel fabrication." 

Я хотел бы преобразовать это, чтобы маркированный список, как это:

<ul> 
<li> Submittals in progress </li> //see the number removed. 
<li> Structural works in progress in S2 & S3 </li> 
<li> Structural works in progress in N4. </li> //end has the dot 
<li> Childrens Mall pedestal and steel fabrication. </li> 
</ul> 

Answer 1

Использовать простое регулярное выражение для разбиения строки, а затем положить нг-повтор на литии в HTML

Вы можете обратиться за помощью углового Js Docs или переполнения стека о том, как использовать нг-повторить

var str = "1. Submittals in progress 2. Structural works in progress in S2 & S3 3. Structural works in progress in N4. 4. Childrens Mall pedestal and steel fabrication."; //sample string 

var result = str.split(/^\d+\.+\s+|\s\d\.\s/); //just skip text at index zero 
//use ng-repeat and print in whatever way you wanted 

result = str.split(/(^\d+\.+\s+|\s\d\.\s)/); //if numbers are also required 

Answer 2

Вы можете использовать это регулярное выражение на основе опережения:

var s = "1. Submittals in progress 2. Structural works in progress in S2 & S3 3. Structural works in progress in N4. 4. Childrens Mall pedestal and steel fabrication."; 

var r = "<ul>\n" + 
     s.replace(/\b\d+\.\s+(.+?)\s*(?=\b\d+\. |\s*$)/g, "<li> $1 </li>\n") + 
     "</ul>\n"; 

console.log(r); 

Выход:

<ul> 
<li> Submittals in progress </li> 
<li> Structural works in progress in S2 & S3 </li> 
<li> Structural works in progress in N4. </li> 
<li> Childrens Mall pedestal and steel fabrication. </li> 
</ul> 

RegEx Demo

RegEx Распад:

\b\d+    # match 1 or more digits after a word boundary 
\.     # match one literal dot 
\s+    # match 1 or more space 
(.+?)    # match 1 or more any character and capture it group #1 
\s*    # match 0 or more spaces 
(?=...)   # a positive lookahead 
(?=\b\d+\. |\s*$) # match must be followed by a word boundary + digits + dot OR 
        # white spaces + line end 

---

Update: Чтобы получить массив соответствующих элементов из исходной строки используйте String#match как:

Это даст:

["1. Submittals in progress", 
"2. Structural works in progress in S2 & S3", 
"3. Structural works in progress in N4.", 
"4. Childrens Mall pedestal and steel fabrication."] 

Answer 3

Чтобы сделать то же самое, которое было предложено анубхавом динамически. вы можете использовать list#appendChild.

Создайте функцию, передайте свою строку и элемент списка, к которому нужно добавить.

var strs = "1. Submittals in progress 2. Structural works in progress in S2 & S3 3. Structural works in progress in N4. 4. Childrens Mall pedestal and steel fabrication.".match(
 
\t /\b\d+\.\s+(.+?)\s*(?=\b\d+\. |\s*$)/g); 
 

 
var list = document.getElementById('list'); 
 
for (var i in strs) { 
 
    var anchor = document.createElement("a"); 
 
    anchor.href = "#"; 
 
    anchor.innerText = strs[i]; 
 

 
    var elem = document.createElement("li"); 
 
    elem.appendChild(anchor); 
 
    list.appendChild(elem); 
 
}

<ul id = "list"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
</ul>

PS: якоря добавлены, чтобы показать образец на том, что также может быть изменен.