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中的参数），所以现在我真的没有想法！

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

您可以将HTML放入不属于显示的DOM部分的元素，然后提取其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>