vue-i18nの翻訳でのhtmlタグのベストプラクティス？

Question

私はvue-i18nを使用しています。中間のアンカータグ付きの文章を翻訳する必要があります。明らかに、私は翻訳の中でhtmlの特定のマークアップを保持したいのですが、これをどのように処理するのがベストですか？私が思い付くことができる唯一のソリューションです

This is a test sentence which cannot 
<a href="https://example.com" class="test-class test-another-class">be split</a> 
or it will not make sense 

：

{ 
    "en": { 
     "example": "This is a test sentence which cannot {linkOpen}be split{linkClose} or it will not make sense" 
    } 
} 

して、コンポーネントテンプレート内

<p v-html="$t('example', { 
    'linkOpen': `<a href="https://example/com" class="test-class test-another-class">`, 
    'linkClose: '</a>' 
    }) 
"></p> 

ない正確にエレガントしかし

は、次の例を考えてみましょう...

編集：私はこれをテストし、実際には動作しません（htmlをparamsに入れることはできません）ので、今は本当にアイデアがありません！

Answer 1

あなたはリンクのためのいくつかの簡単なマークアップを思い付くし、例えば、小型の変換関数を書くことができます：

//In this example links are structured as follows [[url | text]] 

var text = `This is a test sentence which 
cannot [[https://example.com | be split]] or it will not make sense` 

var linkExpr = /\[\[(.*?)\]\]/gi; 
var linkValueExpr = /(\s+\|\s+)/; 

var transformLinks = (string) => { 
    return text.replace(linkExpr, (expr, value) => { 
    var parts = value.split(linkValueExpr); 
    var link = `<a href="${parts[0]}">${parts[2]}</a>`; 

    return link; 
    }); 
} 

alert(transformLinks(text)); 

JSFiddle：https://jsfiddle.net/ru5smdy3/

vue-i18nで、それは（このようにコースのどのあなたを見ていきます簡略化することができます）：

<p v-html="transformLinks($t('example'))"></p> 

Answer 2

表示されたDOMの一部ではない要素にHTMLを挿入し、 textContent。しかし、これはあなたが実際にやろうとしていることに対してはうまくいかないかもしれません。私は言うことができません。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    html: `This is a test sentence which cannot 
 
<a href="https://example.com" class="test-class test-another-class">be split</a> 
 
or it will not make sense`, 
 
    utilityEl: document.createElement('div') 
 
    }, 
 
    methods: { 
 
    htmlToText: function (html) { 
 
     this.utilityEl.innerHTML = html; 
 
     return this.utilityEl.textContent; 
 
    } 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script> 
 
<div id="app"> 
 
    <p v-html="html"></p> 
 
    <p>{{htmlToText(html)}}</p> 
 
</div>