2012-09-24 5 views
2

JavaScript로 HTML praser에 BBCode를 쓰고 있습니다. 나는 [list] 태그로 [b], [i], [img], ... 태그로 성공했지만, 어떻게해야할지 모르겠다. 아마 2, 3, n 요소 일 것이기 때문이다. 에서 :[list] BBCode를 JavaScript를 사용하여 HTML로 변환하는 방법?

[list] 
item 1 
item 2 
item 3 
[/list] 

<ul> 
<li>item 1</li> 
<li>item 2</li> 
<li>item 3</li> 
<ul> 

에 대단히 감사합니다.

+3

[무엇을 시도해 봤습니까?] (http://whathaveyoutried.com) – jeremy

+0

파서는 어떻게 구현됩니까? LALR? 정규 표현식, 자신의 상태 머신,'indexOf' /'split'과'substring'의 끔찍한 조합을 사용합니까? – Dai

+0

@Dai '분할'의 문제점은 무엇입니까? 그것은 여기에 관련이있는 것 같습니다. –

답변

1

indexOf, splitsubstring의 끔찍한 조합을 사용하는 경우 @Dai는 다음과 비슷한 내용을 이야기합니다.

var start = this.value.indexOf("[list]"), 
    ending = this.value.indexOf("[/list]"), 
    lines = this.value.substring(start + 7, ending - 1).split("\n"); 

//perform loop on `lines`: 
// "<li>" + lines[i] + "</li>" 

기본적으로이 [list][/list]의 시작 위치를 얻을 것이다 다음 사이에 선을 얻는다. substring()에서 나는 start+7ending-1이라고 말합니다. 이것은 실제 행의 시작 위치가 일 때 설명 할 수 있습니다. [list]+ 실제 문자열 길이 [list]+ 입력 문자입니다. 끝은 입력 문자를 제거하기 위해 끝에서 하나를 뺍니다. 이를 수행하는 더 좋은 방법은 여섯 개를 더하여 7 대신 시작하고 0을 뺀 다음 빈 배열 값을 없애는 것입니다. 그러나 사용자에게 요구되는 정확한 구문에 따라 어느 쪽이든 괜찮습니다.

변수는 lines 변수가 두 개의 목록 bbcodes 사이에 입력 된 모든 행을 유지하므로 루프를 통과 한 다음 <li></li> 태그로 묶어야한다는 것을 의미합니다. 또한 start > ending을 작성하고 여러 번 수행하는 것과 같은 여러 가지 작업을 검증하여 첫 번째가 아닌 [list]이 발생할 때마다 알 수 있도록 제안합니다.

+0

내 의견은 본질적으로 우스꽝 스럽지만, 당신이 고안 한 해결책은 취약합니다. 설명 된 유효성 검사를 통과하는 잘못된 입력 문자열 "[list] [list] [/ list]"를 고려하십시오. BBCode가'[code]'블록과 같이 이스케이프 된 경우도 있습니다. "[코드] [목록] [/ 코드]", 여전히 귀하의 코드에 의해 변환됩니다. – Dai

+0

@Dai 당신이 내 모든 대답을 읽었 으면합니다. ** ** 나는 OP를 자유롭게 코딩 할 수 있습니다. 나는 위의 게시물에서 "여러 가지"의 유효성을 검증 할 것을 경고했다. – jeremy

+0

그렇습니다. 그러나 입력 BBCode의 유효성을 검사하는 유일한 방법은 먼저 구문 분석하는 것입니다. – Dai

관련 문제