[svelte]TextParser
13434 ワード
<script>
export let contents;
export let textId;
let trackingUrl = /(http(s)?:\/\/|www.)([a-z0-9\w]+\.*)+[a-z0-9]{2,4}([\/a-z0-9-%#?&=\*@\w])+(\.[a-z0-9]{2,4}(\?[\/a-z0-9-%#?&=\*@\w]+)*)*/gi;
let trackingTag = /(#[\d|A-Z|a-z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣|\_]*)/gi;
const parseText = (txt) => {
txt = txt.replaceAll(trackingTag, function(x){
return `*-*${x}*-*`
});
txt = txt.replaceAll(trackingUrl, function(x){
return x.replaceAll('*-*', '')
});
txt = txt.replaceAll(trackingUrl, function(x){
return `*-*${x}*-*`
});
txt = txt.split('\n');
for (let i=0; i<txt.length; i++) {
txt[i] = txt[i].split('*-*');
}
console.log(txt)
return txt
}
const alertTag = (ttt) => {
window.alert(ttt);
}
</script>
{#if contents}
<h1>{textId}</h1>
{#each parseText(contents) as paragraph }
<p>
{#each paragraph as item}
{#if (item.match(trackingTag)) && (item[0] === '#')}
<span on:click={()=>alertTag(item)}>{item}</span>
{:else if item.match(trackingUrl)}
<a href={item}>{item}</a>
{:else}
{item}
{/if}
{/each}
</p>
{/each}
{/if}
<style>
h1 {
margin-top: 50px;
}
p {
font-size: 15px;
line-height: 20px;
margin-bottom: 20px;
padding-top: 1px;
font-family: 'Noto Sans KR', sans-serif;
box-sizing: border-box;
}
p a {
color: red;
text-decoration: none;
transition: 0.2s all;
}
p a:hover {
color: grey;
}
p span {
color: blue;
}
</style>
テキストにhttp、#tagが含まれている場合、httpはリンクを指し、#tagはコンポーネントです
numberフォーマット
textId
をpropsで受信し、各段落の番号を表示します.text形式
contents
をpropsとするcontents textのhttps:と#Tagを分離し、https:と#Tagの前にラベルを付けるために
parseText
が作成されました.タグクリックイベントを処理し、alertTagを呼び出す.
cssを使用してhttpsと#Tagに色を追加します.
trackingUrl
、trackingTag
はそれぞれhttpアドレス、#tagを検索する正規表現である.Reference
この問題について([svelte]TextParser), 我々は、より多くの情報をここで見つけました https://velog.io/@7p3m1k/svelteTextParserテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol