Question

I am working on a multi-language function on wordpress. Each article or page will contain 2 language versions, I need to use a tag to separate them and let my JavaScript knows which section to pull according to the current language option.

I may have something like this in the editor?

[english]
English Content
[/english]
[chinese]
中文内容
[/chinese]

OK so my question is how to have a function to let javascript to recognise the [] and the text in it? or is this something that can be done in the wordpress API? since I have seen kinds of plugins using this in the article.

Answer 1

I would advise you don’t create your own tags, but use normal html element with the lang attribute:

<div lang="en">
   English Content
</div>
<div lang="zh">
   中文内容
</div>

This way you can use the standard css and javascript to work with the content, like this:

*[lang=zh]{
   display:none;
}

and then you could switch the display via javascript when the chinese language is chosen.

^{The universal selector * should be avoided if possible and replaced for a more specific selector.}

Alternatively, if you don’t want to bother your client with html-stuff, let them write these pseudo-tags [english] / [chinese] and convert these after saving into the divs with the according language tags.

Simple regex for capturing the content of such tags (not failproof!):

/\[english\](.*?)\[\/english\]/  // -> content will be in first capturegroup

Just for fun i coded some tiny example how such a replacement could work:

Replacement of custom tags into divs with language-id